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

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

首先我知道我不应该拥有相同的 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());
    }); 
});

由于在 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>;