jQuery.each - Getting li elements inside an ul

Question

I have this HTML on my page:

<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:

<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?

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

Solution 1

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

// 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.

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

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

---

EDIT:

This should work better with an empty UL with no 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);

Solution 2

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

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

        alert(myText);

    });
};

Solution 3

Given an answer as high voted and views. I did find the answer with mixed of here and other links.

I have a scenario where all patient-related menu is disabled if a patient is not selected. (Refer link - how to disable a li tag using JavaScript)

//css
.disabled{
    pointer-events:none;
    opacity:0.4;
}
// jqvery
$("li a").addClass('disabled');
// remove .disabled when you are done

So rather than write long code, I found an interesting solution via CSS.

$(document).ready(function () {
 var PatientId ; 
 //var PatientId =1;  //remove to test enable i.e. patient selected
	if (typeof PatientId == "undefined" || PatientId == "" || PatientId == 0 || PatientId == null) {
		console.log(PatientId);
		$("#dvHeaderSubMenu a").each(function () {			
			$(this).addClass('disabled');
		});		
		return;
	}
})

.disabled{
    pointer-events:none;
    opacity:0.4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="dvHeaderSubMenu">
     <ul class="m-nav m-nav--inline pull-right nav-sub">
						<li class="m-nav__item">
							<a href="#" onclick="console.log('PatientMenu Clicked')" >
								<i class="m-nav__link-icon fa fa-tachometer"></i>
								Overview
							</a>
						</li>

						<li class="m-nav__item active">
							<a href="#" onclick="console.log('PatientMenu Clicked')" >
								<i class="m-nav__link-icon fa fa-user"></i>
								Personal
							</a>
						</li>
            <li class="m-nav__item m-dropdown m-dropdown--inline m-dropdown--arrow" data-dropdown-toggle="hover">
							<a href="#" class="m-dropdown__toggle dropdown-toggle" onclick="console.log('PatientMenu Clicked')">
								<i class="m-nav__link-icon flaticon-medical-8"></i>
								Insurance Claim
							</a>
							<div class="m-dropdown__wrapper">
								<span class="m-dropdown__arrow m-dropdown__arrow--left"></span>
								
											<ul class="m-nav">
												<li class="m-nav__item">
													<a href="#" class="m-nav__link" onclick="console.log('PatientMenu Clicked')" >
														<i class="m-nav__link-icon flaticon-toothbrush-1"></i>
														<span class="m-nav__link-text">
															Primary
														</span>
													</a>
												</li>
												<li class="m-nav__item">
													<a href="#" class="m-nav__link" onclick="console.log('PatientMenu Clicked')">
														<i class="m-nav__link-icon flaticon-interface"></i>
														<span class="m-nav__link-text">
															Secondary
														</span>
													</a>
												</li>
												<li class="m-nav__item">
													<a href="#" class="m-nav__link" onclick="console.log('PatientMenu Clicked')">
														<i class="m-nav__link-icon flaticon-healthy"></i>
														<span class="m-nav__link-text">
															Medical
														</span>
													</a>
												</li>
											</ul>
										
							
						</li>
     </ul>            
</div>