исключить содержимое тега span и получить только li и содержимое тега

Вот мой код:

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, но удалить содержимое тега span, которое находится внутри какого-либо тега li ?

Всего 3 ответа


Не нужно итерации по всем '.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> 


Вы можете проверить свойство 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> 


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