javascript - jquery从子元素迭代内部子元素

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>

我想首先遍历分段器的所有 div 子项，其 id 为“变量”，然后遍历每个子项“变量”的 id 为“类别”的所有输入。

使用 Chrome 开发工具：

和：

$("#segmenter > #variable")

我得到每个 div 变量：[<div id=​"variable" name=​"Zona">​…​&lt;/div>​, <div id=​"variable" name=​"Tipo de Restaurante">​…​&lt;/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

不要用身份证！！！身份证独一无二！！！尝试使用类

Answer 3

ID 应该始终是唯一的..

在您的情况下使用类而不是 ids。像：

<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函数有两个参数，第一个是迭代索引，第二个是元素。

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