My html structure is like below

<h3><span class="mw-headline">Zone1</span></h3>
<ul>
<li>District 1 of Zone1</li>
<li>District 2 of Zone1</li>
<li>District 3 of Zone1</li>
</ul>
<h3><span class="mw-headline">Zone2</span></h3>
<ul>
<li>District 1 of Zone2</li>
<li>District 2 of Zone2</li>
<li>District 3 of Zone2</li>
</ul>

Necesito sacar todas las zonas y distritos en json como a continuación

[
  {
    "zone": "Zone1",
    "districts": [
      "District 1 of Zone1",
      "District 2 of Zone1",
      "District 3 of Zone1"
    ]
  },
  {
    "zone": "Zone2",
    "districts": [
      "District 1 of Zone2",
      "District 2 of Zone2",
      "District 3 of Zone2"
    ]
  }
]

Mi jquery se ve a continuación

$('.mw-headline').each( function() {
    var state=$( this ).html();
    $(this).closest('ul').find('li').each(function()  { //i need the closest ul and iterate it
        alert($( this ).prop('tagName'));
    });

});

Necesito encontrar el ul más cercano del objeto actual e iterar li, como resultado que puedo poner en la matriz.

Pero no funciona ... anu idea de lo que me perdí?

2
sumit 29 ago. 2014 a las 14:42

2 respuestas

La mejor respuesta

Use next de parent para seleccionar ul.

$(this).parent().next('ul').find('li').each(function(){...})

Esto funcionará para el problema completo

var zones = [];

$('.mw-headline').each( function() {
    var obj = {zone:'',districts:[]};
    obj.zone = $(this).text();

    $(this).parent().next('ul').find('li').each(function(){
        obj.districts.push($(this).text());
    });
    zones.push(obj);
});
console.log(zones)

Demo

2
Mritunjay 29 ago. 2014 a las 10:52

Primero necesitas encontrar a su madre:

$(this).parent().closest('ul')

Aún mejor sería usar prev o next:

 $(this).parent().next('ul') // to find next ul

O,

$(this).parent().prev('ul') //to find previous ul
1
Bhojendra Rauniyar 29 ago. 2014 a las 10:43