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>

我想首先迭代分段器的所有带有 id“variable”的 div 子级，然后迭代每个子“variable”的 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。像:

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

和你的选择器

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