jQuery，当我必须为表单使用相同的ID时，HTML距离最近

Question

首先，我知道我不应该具有相同的ID，但是在这种情况下，这是不可避免的...我试图单击一个将.html()设为div的按钮，并将该文本添加到输入字段中。问题是，所有事物都具有相同的ID，并且它们的数目将是未知的。示例是：

<div id="Product">
    <div id="Product-stats"><div class="builder-name">Example Builder</div></div>
    <form><input id="abc" value=-""></input></form>
    <a href="#" class="cart-get-quote-button"></a>
<div>

<div id="Product">
    <div id="Product-stats"><div class="builder-name">Another Builder</div></div>
    <form><input id="abc" value=-""></input></form>
    <a href="#" class="cart-get-quote-button"></a>
<div>

<div id="Product">
    <div id="Product-stats"><div class="builder-name">Third Builder</div></div>
    <form><input id="abc" value=-""></input></form>
    <a href="#" class="cart-get-quote-button"></a>
<div>

因此，我需要单击每个链接并将生成器名称的内容复制到相对输入值，显然我可以使它仅使用一组，但不能使用多个，所以我虽然尝试使用同级？或最接近？这是我所无法使用的]

$(document).ready(function() {
    $('.cart-get-quote-button').on('click', function() {
        $(this).closest('input[id="abc"]').val($(this).closest('.builder-name').html());
    }); 
});

Answer 1

正在运行演示：https://jsfiddle.net/usmanmunir/fnrs6ptL/11/

$('.cart-get-quote-button').on('click', function() {
    var text = $(this).closest('div').find('.builder-name').text();
    $(this).siblings().find('.abc').val(text)
}); 

Answer 2

由于多个相同的ID在HTML中是非法的，因此它们将无法工作，并且您根本无法在JS中使用它们。无论您尝试哪种解决方案，都必须完全忽略ID。

Working JSFiddle（我已修复您HTML中的其他几个错误）。这有效：

var text = $(this).closest('div').find('.builder-name').text();
$(this).closest('div').find('input').val(text);

请注意，您的HTML中还有其他一些错误，除非您修复它们，否则JS将无法工作。他们可能只是此处的错别字：

• 输入... value=-"">中的连字符，应为... value="">；
• 关闭Product </div>实际上是一个新的打开<div>；
• 您不需要</input>;