jquery selectors: an uncommon use case

Question

I have to parse an html page organized this way:

<li id="list">
  <a id="cities">Cities</a>
  <ul>
    <li>
      <a class="region" title="liguria">Liguria</a>
      <ul>
        <li>
          <a class="genova">Genova</a>
        </li>
        <li>
          <a class="savona">Savona</a>
        </li>
      </ul>
    </li>
    <li>
      <a class="region" title="lazio">Lazio</a>
      <ul>
        <li>
          <a class="roma">Roma</a>
        </li>
      </ul>
    </li>
  </ul>
</li>

I need to extract a list of all the cities. I don't care about regions... I am using cheerio from node.js, but I added jquery to the tags since cheerio uses jquery-style selector (AFAIK...).

I have come with this partial solution, partially working (it only lists first region group cities...):

$('li[id="list"] li li').each(function(i, elem) {
  console.log('city:', elem.children[0].next.children[0].data);
});

As you can see, I'm quite confused... :-(
Any clue?

@James Donnelly: yes, thanks, corrected... The data I report here is an abstraction of my real data, so... :-) — MarcoS, Sep 10 '15 at 15:49

mm689 · Accepted Answer · 2015-09-10T15:52:59.343

1

Try: $('li#list ul li ul li a').each(function() { console.error("City: "+$(this).html()); });

As noted below, the selector could be simply $('li#list li li a').

edited Sep 10 '15 at 15:52

answered Sep 10 '15 at 15:46

mm689

359
2
10

`#list li li a` should be enough (as a selector). – raina77ow Sep 10 '15 at 15:51
True: I actually lengthened it just so as to be clear. – mm689 Sep 10 '15 at 15:52
Both solutions list only the cities of the first region... :-( – MarcoS Sep 10 '15 at 15:52
@MarcoS No, they are not, if the structure is the same in your example as in your real data. – raina77ow Sep 10 '15 at 15:53
@raina77ow: you are right, sorry! Effectively, my real data is a bit different, I must have done some silly mistake. **Thanks, everybody! :-)** – MarcoS Sep 10 '15 at 15:56
So, have you got it to work then, or do you need another selector for your different data? – mm689 Sep 10 '15 at 15:57
Working perfectly... :-) – MarcoS Sep 10 '15 at 16:00

score 1 · Answer 2 · answered Sep 10 '15 at 15:50

1

Try this

$('li[id="list"] ul li').each(function(i, elem) {
     ...work on each li containing the region ...
});

answered Sep 10 '15 at 15:50

Nico Savini

458
3
10

1

I did accept first answer, but I suppose I will adopt **your** strategy, I feel it's cleaner... :-) – MarcoS Sep 10 '15 at 16:03
Sorry, how would you "... work on each li containing the region ...", exactly? I did try with something like `$(this).find('ul li a').each(function(i, elem) { console.log(elem); }`, but it doesn't work... :-( – MarcoS Sep 11 '15 at 09:47
try using $(elem).find('ul li a').each(function(i, elem2) { console.log(elem2); } inside the first each for example – Nico Savini Sep 11 '15 at 13:28

PeterKA · Answer 3 · 2015-09-10T16:11:49.273

Note that when using an id selector, since by definition an id is unique, the selector does not need any other qualifiers such as the tag name. And usually you would only use tagname[id...] if you're matching a substring in the ID: ^ - at the beginning, $ - at the end or * - anywhere.

Another approach would be to use :not() to exclude the a elements that should be left out:

$('#list a:not(.region,#cities)').each(function(i, a) {
    console.log( i, a.innerHTML );
});

You have several options for valid selectors you can use:

#list ul ul a
#list li li a
#list ul ul li a

$('#list a:not(.region,#cities)').each(function(i, a) {
    console.log( i, a.innerHTML );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="list">
  <a id="cities">Cities</a>
  <ul>
    <li>
      <a class="region" title="liguria">Liguria</a>
      <ul>
        <li>
          <a class="genova">Genova</a>
        </li>
        <li>
          <a class="savona">Savona</a>
        </li>
      </ul>
    </li>
    <li>
      <a class="region" title="lazio">Lazio</a>
      <ul>
        <li>
          <a class="roma">Roma</a>
        </li>
      </ul>
    </li>
  </ul>
</li>

AND to get all the cities in an array called cities you can use the jQuery .map() method:

var cities = $('#list li li a').map(function() {
    return this.innerHTML;
}).get();

var cities = $('#list li li a').map(function() {
    return this.innerHTML;
}).get();
console.log( cities );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="list">
  <a id="cities">Cities</a>
  <ul>
    <li>
      <a class="region" title="liguria">Liguria</a>
      <ul>
        <li>
          <a class="genova">Genova</a>
        </li>
        <li>
          <a class="savona">Savona</a>
        </li>
      </ul>
    </li>
    <li>
      <a class="region" title="lazio">Lazio</a>
      <ul>
        <li>
          <a class="roma">Roma</a>
        </li>
      </ul>
    </li>
  </ul>
</li>

jquery selectors: an uncommon use case

3 Answers3

Linked