jquery 选择器：一个不常见的用例

Question

我必须解析这样组织的 html 页面：

<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>

我需要提取所有城市的列表。我不关心地区... 我正在使用 node.js 中的 cheerio，但我在标签中添加了 jquery，因为 cheerio 使用 jquery 风格的选择器（据我所知...）。

我提供了这个部分解决方案，部分有效（它只列出了第一个区域组城市...）：

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

如您所见，我很困惑...:-(
有什么线索吗？

Answer 1

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

如下所述，选择器可以只是 $('li#list li li a').

Answer 2

试试这个

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

Answer 3

注意当使用id选择器时，由于根据定义id是唯一的，选择器不需要任何其他限定符，例如标签名称。通常，如果您匹配 ID 中的子字符串，您只会使用 tagname[id...]：^ - 在开头，$ - 在结尾或 * - 任何地方。

另一种方法是使用 :not() 排除应排除的 a 元素：

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

您可以使用多种有效选择器选项：

#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 要获取名为 cities 的数组中的所有城市，您可以使用 jQuery .map() 方法：

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 选择器：一个不常见的用例

jquery selectors: an uncommon use case

jquery

jquery-selectors

node.js

cheerio