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

时间:2011-05-16 12:23:37

标签: jquery each

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

我尝试了不同的方法,但结果并不好。

3 个答案:

答案 0 :(得分:46)

首先,我认为您需要修复列表,因为<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()的{​​{1}},你将获得所有子级文本。

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


修改

如果空li没有UL

,这应该会更好
LI

答案 1 :(得分:8)

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

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

        alert(myText);

    });
};

答案 2 :(得分:1)

给出较高的投票率和观点。我确实找到了包含此处链接和其他链接的答案。

我有一个方案,如果未选择患者,则所有与患者相关的菜单都将被禁用。 (请参阅链接-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>