jQuery.each - 在 ul 中获取 li 元素答案

【问题标题】：jQuery.each - Getting li elements inside an uljQuery.each - 在 ul 中获取 li 元素
【发布时间】：2011-08-26 09:58:04
【问题描述】：

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

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

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>

如何在.items 中迭代所有<li>？

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

【问题讨论】：

标签： jquery each

【解决方案1】：

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

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

        alert(myText);

    });
};

【讨论】：

【解决方案2】：

首先我认为你需要修复你的列表，因为<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。

一件事是，如果您获得上层li 的.text()，您将获得所有下层文本。

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

编辑：

对于没有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);

【讨论】：

这对我有用，但我需要知道 ul 什么时候没有 li，所以，在这种情况下，我应该得到“BLANK”作为文本。也许我的帖子根本不清楚。我不明白这一行： if(current.children().size() > 0) {return true;} 感谢您的回答。
好吧，从技术上讲，这不是有效的标记。但是您可以使用该行来处理它。我会用一些澄清的 cmets 来更新我的答案——它现在已经更新了！。
我编辑了我的问题。我永远不会使用额外的代码。只有 ul 和 li 或
Okie dokie -- 添加了第二个函数并更新了 jsfiddle。

【解决方案3】：

给出一个高票数和意见的答案。我确实找到了混合此处和其他链接的答案。

我有一个场景，如果未选择患者，所有与患者相关的菜单都会被禁用。（参考链接-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

所以我没有编写长代码，而是通过 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>

【讨论】：