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函数不起作用，因为下一个方法只针对兄弟姐妹，而不是后代。

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

一个重要的事实：此标记是嵌套表单的一部分，并在同一页面上重复多次。重要的是该函数以正确的.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()，它也会正常工作，因为它只选择我们传递的选择器可选择过滤的下一个兄弟。

Answer 2

这是兄弟姐妹的后裔，所以这应该可以解决问题：

var target = $(this).next('.level1').find('.target')[0];

Answer 3

在你的情况下，这将有效：

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

什么javascript方法针对后代？

3 个答案: