jquery 选择器：一个重复的用例

Question

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

<li id="ctl00_EFG" class="current">
  <a id="ctl00_SGB" href="http://SGI/EFG">EFG</a>
  <ul style="width:535px;">
    <li class="top_border">
      <a style='color: #d94129; font-weight: bold;' href="http://SGI/EFG/regione-abruzzo" title="EFGAbruzzo">Abruzzo</a>
      <ul style="width:100%;">
        <li>
          <a href="http://SGI/EFG/chieti" title="EFG chieti" rel="nofollow">Chieti</a>
        </li>
        <li>
          <a href="http://SGI/EFG/pescara" title="EFG pescara" rel="nofollow">Pescara</a>
        </li>
      </ul>
    </li>
    <li class="top_border"><a style='color: #d94129; font-weight: bold;' href="http://SGI/EFG/regione-valdaosta" title="EFGValDAosta">Val d'Aosta</a>
      <ul style="width:100%;">
        <li>
          <a href="http://SGI/EFG/aosta" title="EFG aosta" rel="nofollow">Aosta</a>
        </li>
      </ul>
    </li>
  </ul>
</li>

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

{
  "Abruzzo": [
    "Chieti" , "Pescara",
  ],
  "Val d'Aosta": [
    "Aosta",
  ],
};

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

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

$('a[id="ctl00_SGB"]').next().find('ul li').each(function(i, elem) {
  var $categoryTop = $(this);
  var region = $categoryTop.find('a').first().attr('rel', ':not(nofollow)').text();
  console.log('region:', region);
  $(elem).find('ul li a').each(function(i, elem2) {
    console.log('elem2:', $(elem2).text());
});

有线索吗？

P.S.: 我正在改一个昨天插的问题，答对了。不幸的是，我确实把它简化得太多了，所以我不能对我的用例使用正确的答案...

Answer 1

这非常简单，从一个空对象开始，遍历 ctl00_EFG>ul>li 下的 a 元素，并在其中构建一个 ul>li>a.[=15 下的元素数组=]

var result = {};

$('#ctl00_EFG>ul>li>a').each(function(){
  
  var n = $(this).text();
  var a = $(this).next('ul').find('li a').map(function(){
        return $(this).text();
    }).get();
   result[n] = a;
  
});

console.log(result);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="ctl00_EFG" class="current">
  <a id="ctl00_SGB" href="http://SGI/EFG">EFG</a>
  <ul style="width:535px;">
    <li class="top_border">
      <a style='color: #d94129; font-weight: bold;' href=http://SGI/EFG/regione-abruzzo title="EFGAbruzzo">Abruzzo</a>
      <ul style="width:100%;">
        <li>
          <a href=http://SGI/EFG/chieti title="EFG chieti" rel="nofollow">Chieti</a>
        </li>
        <li>
          <a href=http://SGI/EFG/pescara title="EFG pescara" rel="nofollow">Pescara</a>
        </li>
      </ul>
    </li>
    <li class="top_border"><a style='color: #d94129; font-weight: bold;' href=http://SGI/EFG/regione-valdaosta title="EFGValDAosta">Val d'Aosta</a>
      <ul style="width:100%;">
        <li>
          <a href=http://SGI/EFG/aosta title="EFG aosta" rel="nofollow">Aosta</a>
        </li>
      </ul>
    </li>
  </ul>
</li>

Answer 2

我会定义并初始化一个对象，然后在区域上使用 .each() 并在每次迭代中使用该区域作为 key 并获得 value，我会使用.map() 获取该地区所有城市的数组。像这样：

var obj = {};
$('li.top_border > a').each(function() {
    obj[ this.textContent ] = $(this).next().find('a').map(function() {
        return this.textContent;
    })
    .get();
});

console.log( JSON.stringify(obj) );
//Output: {"Abruzzo":["Chieti","Pescara"],"Val d'Aosta":["Aosta"]}

var obj = {};
$('li.top_border > a').each(function() {
    obj[ this.textContent ] = $(this).next().find('a').map(function() {
        return this.textContent;
    })
    .get();
});

console.log( JSON.stringify(obj) );
//Output: {"Abruzzo":["Chieti","Pescara"],"Val d'Aosta":["Aosta"]}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="ctl00_EFG" class="current">
  <a id="ctl00_SGB" href="http://SGI/EFG">EFG</a>
  <ul style="width:535px;">
    <li class="top_border">
      <a style='color: #d94129; font-weight: bold;' href="http://SGI/EFG/regione-abruzzo" title="EFGAbruzzo">Abruzzo</a>
      <ul style="width:100%;">
        <li>
          <a href="http://SGI/EFG/chieti" title="EFG chieti" rel="nofollow">Chieti</a>
        </li>
        <li>
          <a href="http://SGI/EFG/pescara" title="EFG pescara" rel="nofollow">Pescara</a>
        </li>
      </ul>
    </li>
    <li class="top_border"><a style='color: #d94129; font-weight: bold;' href="http://SGI/EFG/regione-valdaosta" title="EFGValDAosta">Val d'Aosta</a>
      <ul style="width:100%;">
        <li>
          <a href="http://SGI/EFG/aosta" title="EFG aosta" rel="nofollow">Aosta</a>
        </li>
      </ul>
    </li>
  </ul>
</li>

jquery 选择器：一个重复的用例

jquery selectors: a repeated use case

jquery

jquery-selectors

node.js

cheerio