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-style selector（AFAIK。 ..）。

我已经找到了这个部分解决方案，不正在工作......

$('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

这是相当简单的，从一个空对象开始，遍历a下的ctl00_EFG>ul>li元素，然后在ul>li>a下构建一个元素数组。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

.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"]}

jquery选择器：重复用例

2 个答案: