jQuery 越来越接近 html 当我必须对表单使用相同的 ID

Question

首先我知道我不应该拥有相同的 ID，但在这种情况下这是不可避免的...我正在尝试单击一个按钮，该按钮将采用 div 的 .html() 和将该文本添加到输入字段。问题是所有东西都有相同的 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>

所以我需要单击每个 link 并将构建器名称内容复制到相对输入值，显然我可以只使用一组而不是多个，所以我虽然也许试图使用兄弟姐妹？或最接近？这是我有的不起作用

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

Answer 1

由于在 HTML 中多个相同的 ID 是非法的，它们将不起作用，而且您根本无法在您的 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="">;
closing Product </div>其实是new open <div>;
你不需要</input>;

jQuery 越来越接近 html 当我必须对表单使用相同的 ID

jQuery getting closest html when I have to use the same IDs for forms

jquery

siblings

closest