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.