Что мне нужно, чтобы получить содержимое элементов li

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я хочу получить текст в пределах диапазона внутри элементов li. Я пытаюсь сделать это с помощью jquery.

   <ul class="category-path breadcrumb">
        <li><a href="/" title="/">Home</a></li>
        <li ><a href="/saat" itemprop="url" title="Saat"><span itemprop="title">Watches</span></a></li>
        <li><a href="/erkek-saatleri" itemprop="url" title="Erkek Saat"><span itemprop="title">man watches</span></a></li>
        <li ><a href="" itemprop="url" title="NACAR"><span itemprop="title">NACAR</span></a></li>
    </ul>
  

код, который я пробовал

   $(".breadcrumb li").each(function (index) {
            var bread = $(this   "a span").text();
            window.alert(bread   index);
        });
  

Комментарии:

1. Попробуйте var bread = $(this).find("span").text();

2. Или вы можете сделать $('a span', this).text()

Ответ №1:

Как указано в комментариях, вы можете использовать либо $(this).find("a span").text() , либо $("a span", this).text() . Кроме того, вы можете использовать :has(span) для того, чтобы настроить таргетинг только на li элементы, у которых есть span элемент:

 $(".breadcrumb li:has(span)").each(function(index) {
  var bread = $("a span", this).text();
  console.log(bread   index);
  var brd = $(this).find("a span").text();
  console.log( brd );
});
  

Кроме того, вы можете получить весь текст в массиве следующим образом:

 var loaves = $(".breadcrumb span").map((index, span) => `${span.textContent}${index}`).get();
console.log( loaves );
  

ДЕМОНСТРАЦИЯ

 //One by one ... Use :has(span) to target only li elements with a span
$(".breadcrumb li:has(span)").each(function(index) {
  var bread = $("a span", this).text();
  console.log(bread   index);
  var brd = $(this).find("a span").text();
  console.log( brd );
});

//All together in an array
var loaves = $(".breadcrumb span").map((index, span) => `${span.textContent}${index}`).get();
console.log( loaves );  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="category-path breadcrumb">
  <li><a href="/" title="/">Home</a></li>
  <li><a href="/saat" itemprop="url" title="Saat"><span itemprop="title">Watches</span></a></li>
  <li><a href="/erkek-saatleri" itemprop="url" title="Erkek Saat"><span itemprop="title">man watches</span></a></li>
  <li><a href="" itemprop="url" title="NACAR"><span itemprop="title">NACAR</span></a></li>
</ul>  

Ответ №2:

Пожалуйста, попробуйте приведенный ниже код. Это поможет вам получить содержимое span в каждом элементе списка.

 $(".breadcrumb li span").each(function () {
        window.alert($(this).text());
});