jQuery.each - Получение элементов li внутри ul - PullRequest
Новая
       3

jQuery.each - Получение элементов li внутри ul

23 голосов
/ 16 мая 2011

У меня есть этот HTML на моей странице: 

<div class="phrase">
    <ul class="items">
        <li class="agap"><ul><li>TEXT1</li></ul></li>
        <li class="agap"><ul>  </ul></li> <!-- empty ul -->
        <li class="aword">TEXT2</li>
        ..
    </ul>
</div>

<div class="phrase"> ... </div>

Я хотел бы получить для каждой "фразы" все элементы в "items" в текстовой переменной, например: 

var string = "TEXT1 - BLANK - TEXT2";

У меня сейчас есть этот код JavaScript: 

<script>
$(function() {
    $('.phrase .items').each(function(){
        var myText = "";

        // At this point I need to loop all li items and get the text inside
        // depending on the class attribute

        alert(myText);

    });
};
</script>

Как я могу перебрать все <li> внутри .items?

Я пробовал разные способы, но у меня не было хороших результатов.

Ответы [ 2 ]

47 голосов
/ 16 мая 2011

Сначала я думаю, что вам нужно исправить свои списки, так как первый узел <ul> должен быть <li> ( stackoverflow ref ). После настройки вы можете сделать это: 

// note this array has outer scope
var phrases = [];

$('.phrase').each(function(){
        // this is inner scope, in reference to the .phrase element
        var phrase = '';
        $(this).find('li').each(function(){
            // cache jquery var
            var current = $(this);
            // check if our current li has children (sub elements)
            // if it does, skip it
            // ps, you can work with this by seeing if the first child
            // is a UL with blank inside and odd your custom BLANK text
            if(current.children().size() > 0) {return true;}
            // add current text to our current phrase
            phrase += current.text();
        });
        // now that our current phrase is completely build we add it to our outer array
        phrases.push(phrase);
    });
    // note the comma in the alert shows separate phrases
    alert(phrases);

Рабочая jsfiddle .

Одна вещь, если вы получите .text() верхнего уровня li, вы получите весь текст подуровня вместе с ним.

Сохранение массива позволит извлечь многократные фразы.

EDIT:

Это должно работать лучше с пустым UL без LI: 

// outer scope
var phrases = [];

$('.phrase').each(function(){
    // inner scope
    var phrase = '';
    $(this).find('li').each(function(){
        // cache jquery object
        var current = $(this);
        // check for sub levels
        if(current.children().size() > 0) {
            // check is sublevel is just empty UL
            var emptyULtest = current.children().eq(0); 
            if(emptyULtest.is('ul') && $.trim(emptyULtest.text())==""){
                phrase += ' -BLANK- '; //custom blank text
                return true;   
            } else {
             // else it is an actual sublevel with li's
             return true;   
            }
        }
        // if it gets to here it is actual li
        phrase += current.text();
    });
    phrases.push(phrase);
});
// note the comma to separate multiple phrases
alert(phrases);
8 голосов
/ 16 мая 2011 
$(function() {
    $('.phrase .items').each(function(i, items_list){
        var myText = "";

        $(items_list).find('li').each(function(j, li){
            alert(li.text());
        })

        alert(myText);

    });
};
...