jQuery.each - 在 ul 中获取 li 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6017309/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery.each - Getting li elements inside an ul
提问by rusben
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?
我怎样才能<li>在里面迭代所有内容.items？
I was trying different ways but I didn't get good results.
我尝试了不同的方法，但没有得到好的结果。
回答by WSkid
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:
首先，我认为您需要修复您的列表，因为 a 的第一个节点<ul>必须是 a <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);
Working jsfiddle.
工作jsfiddle。
One thing is if you get the .text()of an upper level liyou will get all sub level text with it.
一件事是，如果您获得.text()上级的 ，li您将获得所有子级文本。
Keeping an array will allow for many multiple phrases to be extracted.
保留一个数组将允许提取许多多个短语。
EDIT:
编辑：
This should work better with an empty ULwith no LI:
这应该UL在没有 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);
回答by Silver Light
$(function() {
$('.phrase .items').each(function(i, items_list){
var myText = "";
$(items_list).find('li').each(function(j, li){
alert(li.text());
})
alert(myText);
});
};
回答by Ajay2707
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)
我有一个场景，如果未选择患者，则所有与患者相关的菜单都将被禁用。（参考链接 -如何使用 JavaScript 禁用 li 标签）
//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.
因此，我没有编写长代码，而是通过 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>