jQuery。每个-在ul中获取li元素

I have this HTML on my page:

我的页面上有这个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>

I would like to get for each "phrase" all the elements in "items" in a text variable, like this:

我想获取文本变量中“项”中的每个“短语”的所有元素，如下所示:

var string = "TEXT1 - BLANK - TEXT2";

I currently have this javascript code:

我现在有了这个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>

How can I iterate all <li> inside .items?

如何在.items中迭代所有

吗?

I was trying different ways but I didn't get good results.

我尝试了不同的方法，但是没有得到好的结果。

2 个解决方案

#1

First I think you need to fix your lists, as the first node of a <ul> must be a <li> (* ref). Once that is setup you can do this:

首先，我认为您需要修复您的列表，因为

(* ref)。一旦设置好了，你可以这样做:
(* 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);

Working jsfiddle.

jsfiddle工作。

One thing is if you get the .text() of an upper level li you will get all sub level text with it.

一件事是，如果您获得一个高级li的.text()，您将获得它的所有子级文本。

Keeping an array will allow for many multiple phrases to be extracted.

保留一个数组将允许提取多个短语。

EDIT:

编辑:

This should work better with an empty UL with no LI:

在没有LI的空UL时，这应该会更好:

// 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);

#2

$(function() {
    $('.phrase .items').each(function(i, items_list){
        var myText = "";

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

        alert(myText);

    });
};

#1