Question

I have the next 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>

I want to iterate firstly over all div child of segmenter with id “variable”, then iterate over all input with id “category” of each child “variable”.

Using Chrome Dev tools:

With:

$("#segmenter > #variable")

I get every div variable: [<div id=​"variable" name=​"Zona">​…​</div>​, <div id=​"variable" name=​"Tipo de Restaurante">​…​</div>​]

Now from here everything that I tried don’t work, for example:

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

I only get 4 input “category”: [<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">​]

I don’t know why, what I need is iterate something like:

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
});

Many Thanks.

Answer 1

ID should always be unique..

use class instead of ids in your case. like:

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

and your selector

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