Получение текстовых значений li (без текста во вложенных элементах) - PullRequest
Новая
       12

Получение текстовых значений li (без текста во вложенных элементах)

5 голосов
/ 07 января 2011 
<ul>
  <li class="item-i">AI</li>
  <li class="item-ii">AII
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B</li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Как я могу получить значения AI AII A B C III?

До сих пор я пробовал следующее: 

$(document).ready(function() {
    $('li').each(function(index) {
     alert($(this).text());
    });
});

Но это не дало мне требуемых результатов.Когда он достигает «пункта II», он дает все результаты.

Я хочу один за другим.

Ответы [ 4 ]

2 голосов
/ 07 января 2011

Функция text () выбирает все узлы в списке элементов 'item-ii'. Поскольку вам нужно выбрать только текстовые узлы, используйте вместо этого: 

$(document).ready(function(){
            $('li').each(function(index) {
     alert($(this).contents().filter(function(){ return this.nodeType==3}).text());
    });
        });
2 голосов
/ 07 января 2011 
$(function(){
  var text = $('li').map(function(){
    return $(this).contents().map(function(){
      return this.nodeType==3 ? this.nodeValue : "";
    }).get().join('');
  }).get().join(' ');
  console.log(text);
  // AI AII
  //
  //     A B C III
});

Метод contents() предоставляет вам как текстовые, так и дочерние узлы.Текстовые узлы имеют nodeType из 3.Для менее функционального кода в стиле попробуйте следующее: 

$(function(){
  $('li').each(function(){
    $(this).contents().each(function(){
      if (this.nodeType==3){
        console.log(this.nodeValue.replace(/^\s+|\s+$/g,''));
      }
    });
  });
  // AI
  // AII
  // 
  // A
  // B
  // C
  // III
});

Обратите внимание, что из-за разметки все еще есть пустой текстовый узел.

1 голос
/ 07 января 2011 
$(function() {
  var content = $.map($('ul li').contents(), function(elem, i) {
    if( elem.nodeType === 3 && $.trim(elem.nodeValue).length )
        return $.trim(elem.nodeValue);
  });

  alert(content);
});

Ссылка: $. Map () , $. Trim () , .contents ()

0 голосов
/ 07 января 2011 
<form>
    <ul>    
     <li class="item-i">AI</li>
     <li class="item-ii">AII</li>
     <ul class="level-2">
         <li class="item-a">A</li>
         <li class="item-b">B</li>
         <li class="item-c">C</li>
        </ul>
      <li class="item-iii">III</li>
  </ul>
</form>
...