排除 span 标签内容，只获取 li 和 a 标签内容

Question

这是我的代码：

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>

我试过的：

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

预计O/P

1 head Baby Gem lettuce
cucumber
fresh mint 
1 tbsp fresh lemon juice
100g can tuna in brine
2 mini pitta breads

我如何遍历 li 但删除某些 li[=33= 中的 span 标签内容] 标签？

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

Answer 2

您可以检查 nodeType 属性到 return 只有来自每个 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>

Answer 3

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

排除 span 标签内容，只获取 li 和 a 标签内容

exclude span tag content and get only li and a tag content

javascript

node.js

cheerio