Question

我有下一个HTML：

<div id="segmenter">
    <div id="variable" name="Zone">
        <h3>Zona</h3>
        <ul>
            <li><input id="category" type="checkbox" value="Center">Center</li>
            <li><input id="category" type="checkbox" value="East">East</li>
            <li><input id="category" type="checkbox" value="South">South</li>
        </ul>
    </div>
    <div id="variable" name="Type of">
        <h3>Tipo de Restaurante</h3>
        <ul>
            <li><input id="category" type="checkbox" value="Freestander">Freestander</li>
            <li><input id="category" type="checkbox" value="Instore">Instore</li>
            <li><input id="category" type="checkbox" value="Mall">Mall</li>
        </ul>
    </div>
</div>

我想首先在id为“variable”的segmenter的所有div子节点上迭代，然后迭代所有输入，每个子节点“变量”的id为“category”。

使用Chrome开发工具：

使用：

$("#segmenter > #variable")

我得到每个div变量：[<div id="variable" name="Zona">…</div>, <div id="variable" name="Tipo de Restaurante">…</div>]

现在从这里我尝试的一切都不起作用，例如：

$("#segmenter > #variable").find("#category");

我只获得4个输入“类别”：[<input id="category" type="checkbox" value="Centro">, <input id="category" type="checkbox" value="Freestander">, <input id="category" type="checkbox" value="Instore">, <input id="category" type="checkbox" value="Mall">]

我不知道为什么，我需要的是迭代：

var oVariables = $("#segmenter > #variable");
$.each(oVariables, function(){
    var oCategory = $(this).find("#category").text();//in the first call for div-name="zone", only have the first input-value"center"
    //Iterate Again
        //get checked values, etc
});

非常感谢。

Answer 1

ID是唯一的。而是使用类来代替集合。将所有ID更改为Classes，然后迭代：

$.each($('div.variable'), function(elem){
    $.each($(elem).find('input.category'), function(childElem){
        //Do something with childElem here
    })
});

Answer 2

不要使用ID !!!我是独一无二的！尝试使用类

Answer 3

ID应始终为唯一 ..

在你的情况下使用class而不是id。像：

<div id="variable" name="Zone">
    _^_ here
<div class="variable" name="Zone"> //do this for all ids

和您的选择器

$("#segmenter > .variable").find(".category");

Answer 4

我有同样的问题。我需要访问新的子标签。

我的方式：

var list_group_items = $("a.list-group-item");
    $.each(list_group_items,function(index,value){
        $(list_group_items[index]).hover(function(){
            $.each($(list_group_items[index]).find('small'), function(childElem,Element){
                console.log(Element);
                TweenLite.to(Element, 2, {"visibility":"visible"});
            });

        },function(){
            $.each($(list_group_items[index]).find('small'), function(childElem,Element){
                //Do something with childElem here
                TweenLite.to(Element, 2, {"visibility":""});
            });

        });
    });

注意1：在$.each函数上有两个参数，第一个是迭代的 index ，第二个是 element 。

注意2：我使用TeenMax库制作动画。

jquery遍历来自子元素的inner-child元素

4 个答案: