jQuery.each – Abrufen von li-Elementen in einer ul

Lesezeit: 5 Minuten

Benutzer-Avatar
rusben

Ich habe diesen HTML-Code auf meiner Seite:

<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>

Ich möchte für jede “Phrase” alle Elemente in “items” in einer Textvariablen wie folgt erhalten:

var string = "TEXT1 - BLANK - TEXT2";

Ich habe derzeit diesen Javascript-Code:

<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>

Wie kann ich alle iterieren <li> Innerhalb .items?

Ich habe verschiedene Wege ausprobiert, aber ich habe keine guten Ergebnisse erzielt.

Benutzer-Avatar
WSkid

Zuerst denke ich, dass Sie Ihre Listen als ersten Knoten von a reparieren müssen <ul> muss ein sein <li> (Stapelüberlauf-Referenz). Sobald dies eingerichtet ist, können Sie Folgendes tun:

// 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);

Arbeiten jsfiddle.

Eine Sache ist, wenn Sie die bekommen .text() einer oberen Ebene li Sie erhalten damit den gesamten Text der Unterebene.

Das Beibehalten eines Arrays ermöglicht das Extrahieren vieler mehrfacher Phrasen.


BEARBEITEN:

Das sollte mit einem leeren besser funktionieren UL ohne 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);

  • Das funktioniert für mich, aber ich muss wissen, wann ul kein li hat, also sollte ich in diesem Fall “BLANK” als Text bekommen. Vielleicht war mein Beitrag überhaupt nicht klar. Ich verstehe diese Zeile nicht: if(current.children().size() > 0) {return true;} Danke für deine Antwort.

    – rusben

    16. Mai 2011 um 13:08 Uhr


  • Nun, das ist technisch gesehen kein gültiges Markup. Aber Sie können damit arbeiten, indem Sie diese Zeile verwenden. Ich werde meine Antwort mit einigen klärenden Kommentaren aktualisieren – sie ist jetzt aktualisiert!.

    – WSkid

    16. Mai 2011 um 13:14 Uhr


  • Ich habe meine Frage bearbeitet. Ich werde niemals mit Extrange-Code ul. Nur ul mit li oder

      – rusben

      16. Mai 2011 um 13:21 Uhr

    • Okie dokie — eine zweite Funktion hinzugefügt und jsfiddle aktualisiert.

      – WSkid

      16. Mai 2011 um 13:32 Uhr


    $(function() {
        $('.phrase .items').each(function(i, items_list){
            var myText = "";
    
            $(items_list).find('li').each(function(j, li){
                alert(li.text());
            })
    
            alert(myText);
    
        });
    };
    

    Angesichts einer Antwort, die so hoch gestimmt und angesehen wurde. Ich habe die Antwort mit einer Mischung aus hier und anderen Links gefunden.

    Ich habe ein Szenario, in dem alle patientenbezogenen Menüs deaktiviert sind, wenn kein Patient ausgewählt ist. (Siehe Link – So deaktivieren Sie ein li-Tag mit JavaScript)

    //css
    .disabled{
        pointer-events:none;
        opacity:0.4;
    }
    // jqvery
    $("li a").addClass('disabled');
    // remove .disabled when you are done
    

    Anstatt also langen Code zu schreiben, habe ich eine interessante Lösung über CSS gefunden.

    $(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>

    1174990cookie-checkjQuery.each – Abrufen von li-Elementen in einer ul

    This website is using cookies to improve the user-friendliness. You agree by using the website further.

    Privacy policy