javascript - 什么 JavaScript 方法可以定位后代？

Question

我正在使用 JavaScript 函数根据从选择字段中选择的选项来设置文本字段的值。

JavaScript 包含很多其他内容，但只有以下内容与这个问题相关。

$(function (){
    $('.source').live("change", function(e) { 
        var target = $(this).next('.target')[0];
        ----other stuff----
    });
});

我最初的表单设置如下，一切正常。

<select class="source"></select>
<input class="target"></input>

我随后添加了一些样式，这需要额外的 div。

<select class="source"></select>
<div class="level1">
    <div class="level2">
        <input class="target"></input>
    </div>
</div>

现在 javascript 函数不起作用，因为下一个方法仅针对 sibling 而不是后代。

所以我的问题是，我应该使用什么方法来定位特定的后代？

一个重要的事实:此标记是嵌套表单的一部分，并且在同一页面上重复多次。重要的是，该函数应定位正确的 .target 字段，即紧接的后续字段和后代字段。

我尝试过明显的候选者 - .find()、.children() - 但这些似乎不起作用。将不胜感激任何想法或指示。

谢谢!

Answer 1

现在，在新的标记结构中 .target 输入被包装在 div 中，并且类为 level1，您可以发现 div 首先使用 next()，然后使用 find() 方法获取 .target 输入。

$(function (){
    $('.source').live("change", function(e) { 
        var target = $(this).next('.level1').find('.target')[0];
        ----other stuff----
    });
});

注意:即使您不将任何选择器传递给 next() ，它也能正常工作，因为它只选择紧邻的下一个同级(可选)，并由我们传递的选择器过滤。