嵌套元素的Jquery

Question

我有如下DIV结构（请检查image）。当我使用Jquery点击相对按钮时，我想更改文本框的内容。

例如，如果我单击按钮（1），则文本框（1）的内容应该更改。同样，如果我单击按钮（2），则文本框（2）的内容应该更改。

我已编写以下代码，但它适用于按钮（2），当我点击按钮（1）时，它会更改两个文本框的内容。

     $(document).on('click', '.b', function(e) {
        var a = $(this).closest('.a');
        $('.c', a).val("sample text");
    });

我可以通过为不同的按钮/文本框设置不同的类来解决这个问题。但我想拥有相同的类结构并解决问题。

Answer 1

如果您的DOM结构总是与图像中的相同，那么这应该有效。

<强> HTML：

<div class="a">
    <input type="text" class="c">
    <input type="button" value="Button" class="b">
    <div class="a">
        <input type="text" class="c">
        <input type="button" value="Button" class="b">
    </div>
</div>

<强> jQuery的：

$('.b').on('click', function () {
    //Find parent .a
    var $a = $(this).parent();

    //Add in the text
    $a.children(".c").val("sample text");
});

WORKING EXAMPLE

Answer 2

它的工作方式是这样的，因为你遍历最近的".a"元素，然后执行一个本质上递归的查找;这就是为什么它会选择两个文本框。

相反，只需找到兄弟元素：

$(document).on('click', '.b', function(e) {
    var $c = $(this).siblings('.c');
    $c.val("sample text");
});