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

Question

我正在改一个昨天插的，答对了。

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

<li id="list">
  <ul>
    <li>
      <a class="region">Liguria</a>
      <ul>
        <li>
          <a class="city">Genova</a>
        </li>
        <li>
          <a class="city">Savona</a>
        </li>
      </ul>
    </li>
    <li>
      <a class="region">Lazio</a>
      <ul>
        <li>
          <a class="city">Roma</a>
        </li>
      </ul>
    </li>
  </ul>
</li>

我需要提取包含地区和城市的对象，如下所示：

result = {
  'Liguria': [
    'Genova' , 'Savona',
  ],
  'Lazio': [ 'Roma', ],
};

我正在使用 node.js 中的 cheerio，但我在标签中添加了 jquery，因为 cheerio 使用 jquery 风格的选择器（据我所知...）。

我提供了这个部分解决方案，不工作...

$('li[id="list"] ul li').each(function(i, elem) {
  console.log('region:', $(this).html());
  // work on each li containing the region to get the cities...
  // ???
});

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

Answer 1

考虑到地区和城市的方便类，我觉得可以简单点：

var result = {};
// Loop through regions...
$("#list a.region").each(function() {
  // For this region, create an entry on the result object
  // and get an array of its cities. Note that we have to
  // use .next() to get the UL following the a.region
  var $this = $(this);
  result[$this.text()] = $this.next().find("a.city").map(function() {
    return $(this).text();
  }).get();
});

实例：

var result = {};
// Loop through regions...
$("#list a.region").each(function() {
  // For this region, create an entry on the result object
  // and get an array of its cities
  var $this = $(this);
  result[$this.text()] = $this.next().find("a.city").map(function() {
    return $(this).text();
  }).get();
});
document.body.insertAdjacentHTML(
  "beforeend",
  "<pre>" + JSON.stringify(result, null, 2) + "</pre>"
);

<li id="list">
  <ul>
    <li>
      <a class="region">Liguria</a>
      <ul>
        <li>
          <a class="city">Genova</a>
        </li>
        <li>
          <a class="city">Savona</a>
        </li>
      </ul>
    </li>
    <li>
      <a class="region">Lazio</a>
      <ul>
        <li>
          <a class="city">Roma</a>
        </li>
      </ul>
    </li>
  </ul>
</li>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

I am using cheerio from node.js, but I added jquery to the tags since cheerio uses jquery-style selector (AFAIK...).

大部分。我已经有几年没有使用 cheerio 了，但上次我使用时，each 回调中的 this 是一个 cheerio 对象（类似于 jQuery 对象）而不是原始元素。所以在我的 cheerio 代码中有几个地方我会用 this.text() 而不是 $(this).text()，例如。您可能需要像上面那样进行编辑。

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

jquery selectors: a not so uncommon use case

jquery

jquery-selectors

node.js

cheerio