排除跨度标签内容,仅获取li和标签内容

时间:2018-11-19 10:54:56

标签: javascript node.js cheerio

这是我的代码:

HTML:-

person  period  status  id  period_int  person_fk   status_fk   status_before   status_change   help_partition  counter
   Bob     Jan   new        1   1   1   1   -1  1   1   1
   Bob     Feb   retained   2   2   1   2   1   1   2   1
   Bob     Mar   retained   3   3   1   2   2   0   2   2
   Bob     Apr   dormant    4   4   1   3   2   1   3   1
   Bob     May   dormant    5   5   1   3   3   0   3   2
   Bob     Jun   resurected 6   6   1   4   3   1   4   1
   Bob     Jul   retained   7   7   1   2   4   1   5   1
   Bob     Agu   dormant    8   8   1   3   2   1   6   1
   Jim     Jan   new        9   1   2   1   3   1   7   1
   Jim     Feb   dormant    10  2   2   3   1   1   8   1
   Jim     Mar   dormant    11  3   2   3   3   0   8   2
   Jim     Apr   dormant    12  4   2   3   3   0   8   3
   Jim     May   dormant    13  5   2   3   3   0   8   4
   Jim     Jun   resurected 14  6   2   4   3   1   9   1
   Jim     Jul   dormant    15  7   2   3   4   1   10  1
   Jim     Agu   resurected 16  8   2   4   3   1   11  1

我尝试过的事情:

<div class="ingredients-list">
    <div class="ingredients-list__content">
        <li >1 head Baby Gem lettuce</li>
        <li>cucumber</li>
        <li>
           fresh <a href="/glossary/mint" class="ingredients-list__glossary-link" data-tooltip-content="#ingredients-glossary &gt; article" data-tooltip-width="350" data-tooltip-hide-delay="200" data-tooltip-flyout="true">mint</a>
           <span class="ingredients-list__glossary-element" id="ingredients-glossary">
              <article id="node-261061" role="main" class="node node-glossary-item node-teaser node-teaser clearfix main row grid-padding">
                 <div class="node-image"> <a href="/glossary/mint"><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/mint-resized.png?itok=YXmI8kex" width="100" height="100" alt="Mint" title="Mint"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/mint">Mint</a></h2>
                 <span class="fonetic text-style-alt">mi-nt</span>
                 <p>There are several types of mint, each with its own subtle difference in flavour and appearance.&#x2026;</p>
              </article>
           </span>
        </li>

        <li>1 tbsp fresh lemon juice</li>
        <li>
           100g can <a href="/glossary/tuna">tuna</a> in brine
           <span >
              <article>
                 <div><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/tuna.jpg?itok=8T9-jfhU" width="100" height="100" alt="Tuna" title="A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/tuna">Tuna</a></h2>
                 <span class="fonetic text-style-alt">tune-ah</span>
                 <p>A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans. They&#x2026;</p>
              </article>
           </span>
        </li>
        <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>
     </ul>
  </div>
</div>

当前O / P

$('.ingredients-list li', html).each(function(i, elm) {
    console.log($(this).text()) // for testing do text() 
}); 

预期O / P

1 head Baby Gem lettuce
cucumber
fresh mint Mint mi-ntThere are several types of mint, each with its own subtle difference in flavour and appearance.… 
1 tbsp fresh lemon juice
100g can tuna in brine Tuna tune-ahA member of the mackerel family, tuna are mainly found in the world's warmer oceans. They… 
2 mini pitta breads

如何遍历 li ,但要删除某些 li 标记内的 span 标记内容?

3 个答案:

答案 0 :(得分:1)

无需遍历所有'.ingredients-list li'元素。

您可以使用$('.ingredients-list li').find('span').remove();删除所有span元素。

代码:

$('.ingredients-list li').find('span').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ingredients-list">
  <div class="ingredients-list__content">
    <li>1 head Baby Gem lettuce</li>
    <li>cucumber</li>
    <li>
      fresh <a href="/glossary/mint" class="ingredients-list__glossary-link" data-tooltip-content="#ingredients-glossary &gt; article" data-tooltip-width="350" data-tooltip-hide-delay="200" data-tooltip-flyout="true">mint</a>
      <span class="ingredients-list__glossary-element" id="ingredients-glossary">
              <article id="node-261061" role="main" class="node node-glossary-item node-teaser node-teaser clearfix main row grid-padding">
                 <div class="node-image"> <a href="/glossary/mint"><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/mint-resized.png?itok=YXmI8kex" width="100" height="100" alt="Mint" title="Mint"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/mint">Mint</a></h2>
                 <span class="fonetic text-style-alt">mi-nt</span>
      <p>There are several types of mint, each with its own subtle difference in flavour and appearance.&#x2026;</p>
      </article>
      </span>
    </li>

    <li>1 tbsp fresh lemon juice</li>
    <li>
      100g can <a href="/glossary/tuna">tuna</a> in brine
      <span>
              <article>
                 <div><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/tuna.jpg?itok=8T9-jfhU" width="100" height="100" alt="Tuna" title="A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/tuna">Tuna</a></h2>
                 <span class="fonetic text-style-alt">tune-ah</span>
      <p>A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans. They&#x2026;</p>
      </article>
      </span>
    </li>
    <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>
    </ul>
  </div>
</div>

答案 1 :(得分:1)

您可以检查 nodeType 属性,以仅返回每个 li 元素中的文本:

$('.ingredients-list li').each(function(i, elm) {
  var text = $(this).contents().filter(function() {
    return this.nodeType == 3 || $(this).is('a'); // text node or anchor
  }).text().trim();
  console.log(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ingredients-list">
    <div class="ingredients-list__content">
	<ul>
        <li >1 head Baby Gem lettuce</li>
        <li>cucumber</li>
        <li>
           fresh <a href="/glossary/mint" class="ingredients-list__glossary-link" data-tooltip-content="#ingredients-glossary &gt; article" data-tooltip-width="350" data-tooltip-hide-delay="200" data-tooltip-flyout="true">mint</a>
           <span class="ingredients-list__glossary-element" id="ingredients-glossary">
              <article id="node-261061" role="main" class="node node-glossary-item node-teaser node-teaser clearfix main row grid-padding">
                 <div class="node-image"> <a href="/glossary/mint"><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/mint-resized.png?itok=YXmI8kex" width="100" height="100" alt="Mint" title="Mint"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/mint">Mint</a></h2>
                 <span class="fonetic text-style-alt">mi-nt</span>
                 <p>There are several types of mint, each with its own subtle difference in flavour and appearance.&#x2026;</p>
              </article>
           </span>
        </li>

        <li>1 tbsp fresh lemon juice</li>
        <li>
           100g can <a href="/glossary/tuna">tuna</a> in brine
           <span >
              <article>
                 <div><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/tuna.jpg?itok=8T9-jfhU" width="100" height="100" alt="Tuna" title="A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans"></a></div>
                 <h2 class="node-title node-glossary-title"><a href="/glossary/tuna">Tuna</a></h2>
                 <span class="fonetic text-style-alt">tune-ah</span>
                 <p>A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans. They&#x2026;</p>
              </article>
           </span>
        </li>
        <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>
     </ul>

答案 2 :(得分:0)

var html = '<div class="ingredients-list">
        <div class="ingredients-list__content">
            <li >1 head Baby Gem lettuce</li>
            <li>cucumber</li>
            <li>
               fresh <a href="/glossary/mint" class="ingredients-list__glossary-link" data-tooltip-content="#ingredients-glossary &gt; article" data-tooltip-width="350" data-tooltip-hide-delay="200" data-tooltip-flyout="true">mint</a>
               <span class="ingredients-list__glossary-element" id="ingredients-glossary">
                  <article id="node-261061" role="main" class="node node-glossary-item node-teaser node-teaser clearfix main row grid-padding">
                     <div class="node-image"> <a href="/glossary/mint"><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/mint-resized.png?itok=YXmI8kex" width="100" height="100" alt="Mint" title="Mint"></a></div>
                     <h2 class="node-title node-glossary-title"><a href="/glossary/mint">Mint</a></h2>
                     <span class="fonetic text-style-alt">mi-nt</span>
                     <p>There are several types of mint, each with its own subtle difference in flavour and appearance.&#x2026;</p>
                  </article>
               </span>
            </li>

            <li>1 tbsp fresh lemon juice</li>
            <li>
               100g can <a href="/glossary/tuna">tuna</a> in brine
               <span >
                  <article>
                     <div><img src="//www.bbcgoodfood.com/sites/default/files/styles/bbcgf_thumbnail_search/public/glossary/tuna.jpg?itok=8T9-jfhU" width="100" height="100" alt="Tuna" title="A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans"></a></div>
                     <h2 class="node-title node-glossary-title"><a href="/glossary/tuna">Tuna</a></h2>
                     <span class="fonetic text-style-alt">tune-ah</span>
                     <p>A member of the mackerel family, tuna are mainly found in the world&apos;s warmer oceans. They&#x2026;</p>
                  </article>
               </span>
            </li>
            <li class="ingredients-list__item" itemprop="ingredients" content="2 mini pitta breads">2 mini pitta breads</li>
         </ul>
      </div>
    </div>';

var div = $("<div>"); 
div.html(html);

div.find('.ingredients-list li').each(function(i, elm) {
  $(this).find('span').remove(); 
  console.log($(this).text().trim()); 
});
相关问题