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

【问题标题】：jquery selectors: an uncommon use casejquery 选择器：一个不常见的用例
【发布时间】：2015-12-07 00:00:21
【问题描述】：

我必须解析以这种方式组织的 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，但由于 cheerio 使用 jquery 样式的选择器（AFAIK ...），因此我将 jquery 添加到标签中.

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

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

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

【问题讨论】：

@James Donnelly：是的，谢谢，已更正......我在这里报告的数据是我真实数据的抽象，所以...... :-)

标签： jquery node.js jquery-selectors cheerio

【解决方案1】：

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

如下所述，选择器可以简单地为$('li#list li li a')。

【讨论】：

#list li li a 应该足够了（作为选择器）。
是的：我实际上加长了它只是为了清楚。
两种解决方案都只列出了第一个地区的城市... :-(
@MarcoS 不，如果您的示例中的结构与实际数据中的结构相同，则它们不是。
@raina77ow：你是对的，对不起！实际上，我的真实数据有点不同，我一定犯了一些愚蠢的错误。 谢谢大家！ :-)

【解决方案2】：

试试这个

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

【讨论】：

我确实接受了第一个答案，但我想我会采用 your 策略，我觉得它更干净...... :-)
抱歉，您将如何“...处理包含该区域的每个 li ...”，究竟是什么？我确实尝试过$(this).find('ul li a').each(function(i, elem) { console.log(elem); } 之类的东西，但它不起作用...... :-(
尝试在第一个每个示例中使用 $(elem).find('ul li a').each(function(i, elem2) { console.log(elem2); }

【解决方案3】：

注意，当使用 id 选择器时，因为根据定义，id 是唯一的，所以选择器不需要任何其他限定符，例如标签名称。通常你只会使用tagname[id...]，如果你匹配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>

【讨论】：