jQuery.each - Obtention d'éléments li dans un ul
J'ai ce HTML sur ma 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>
Je voudrais obtenir pour chaque "phrase" tous les éléments dans "items" dans une variable de texte, comme ceci:
var string = "TEXT1 - BLANK - TEXT2";
J'ai actuellement ce 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>
Comment puis-je répéter tout <li> à l'intérieur .items?
J'essayais de différentes manières mais je n'ai pas obtenu de bons résultats.
Je pense d'abord que vous devez corriger vos listes, car le premier noeud d'un <ul> Doit être un <li> ( stackoverflow ref ). Une fois que cela est configuré, vous pouvez le faire:
// 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);
Fonctionnement jsfiddle .
Une chose est que si vous obtenez la .text() d'un niveau supérieur li, vous obtiendrez tout le texte de sous-niveau avec.
Garder un tableau permettra d'extraire plusieurs phrases multiples.
MODIFIER:
Cela devrait mieux fonctionner avec un UL vide sans 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);
});
};
Donné une réponse en tant que votes élevés et vues. J'ai trouvé la réponse avec un mélange de liens ici et d'autres.
J'ai un scénario dans lequel tous les menus liés au patient sont désactivés si aucun patient n'est sélectionné. (Se référer au lien - comment désactiver une balise li en utilisant JavaScript )
//css
.disabled{
pointer-events:none;
opacity:0.4;
}
// jqvery
$("li a").addClass('disabled');
// remove .disabled when you are done
Alors plutôt que d'écrire du code long, j'ai trouvé une solution intéressante 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>