jQuery.each-ul内のli要素の取得
私のページにこの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？
さまざまな方法を試していましたが、良い結果が得られませんでした。
_<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 。
1つは、上位レベルliの.text()を取得すると、すべてのサブレベルテキストが取得されます。
配列を保持することで、多くの複数のフレーズを抽出できます。
編集：
これは、ULのない空の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);
_$(function() {
$('.phrase .items').each(function(i, items_list){
var myText = "";
$(items_list).find('li').each(function(j, li){
alert(li.text());
})
alert(myText);
});
};
高い投票と意見として答えを与えられました。ここと他のリンクを組み合わせて答えを見つけました。
患者が選択されていない場合、すべての患者関連メニューが無効になるシナリオがあります。 （リンクを参照- JavaScriptを使用してliタグを無効にする方法 ）
//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>