jQuery - Anzeigen divs eins nach dem anderen

Ich versuche, ein einfaches Skript zu schreiben, das in der Lage sein wird, jeden einzelnen DIV einzeln zu lesen/anzuzeigen (ohne die anderen divs zu stören). Leider hat meine Idee nicht so funktioniert, wie ich es mir vorgestellt habe. Ich erreichte, was ich mit .children().remove().each zielte aber fand heraus, dass es das erste div überspringt und alle anderen innen löscht. Ich werde wirklich dankbar sein, wenn mir jemand helfen oder darauf hinweisen kann, was ich falsch mache.jQuery - Anzeigen divs eins nach dem anderen

$(function Testing(){ 
 
    
 
    $("div").each(function(){ 
 
     var Div = $(this).text(); 
 
     alert(Div); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="Alpha"> 
 
     Alpha 
 
     <div id="Bravo"> 
 
      Bravo 
 
      <div id="Charlie"> 
 
       Charlie 
 
       <div id="Delta"> 
 
        Delta 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

Quelle

2017-03-22 George Stoqnov

Es sieht so aus, als ob Sie die verschachtelte Struktur haben möchten. Wenn das der Fall ist, kann man es zumindest ein paar Möglichkeiten:

$(function Testing() { 
 

 
    $("#container div").each(function() { 
 

 
    // my variation on this answer: http://stackoverflow.com/a/32170000/1544886 
 
    var Div = $(this).contents().not($(this).children()).text(); 
 

 
    /* or another way: http://stackoverflow.com/a/33592275/1544886 
 
     var Div = $(this) 
 
     .clone() //clone the element 
 
     .children() //select all the children 
 
     .remove() //remove all the children 
 
     .end() //again go back to selected element 
 
     .text(); 
 
    */ 
 

 
    alert(Div); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="container"> 
 
    <div id="Alpha"> 
 
    Alpha 
 
    <div id="Bravo"> 
 
     Bravo 
 
     <div id="Charlie"> 
 
     Charlie 
 
     <div id="Delta"> 
 
      Delta 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

fügte ich div#container nur, weil ich nicht die zusätzlichen Warnungen aus den div s erstellt erzeugt gefallen hat, indem ein Code-Snippet Es ist nicht notwendig, dies in Ihrem Code zu tun ... Sie können es ignorieren und einfach Ihren Selektor verwenden $("div").

Quelle

2017-03-22 18:49:03

Vielen Dank! Ich erkenne, wo mein Fehler war. Jetzt funktioniert es ohne Probleme. –

Ihre gewünschte Ausgabe zu erhalten, müssen Sie so Ihre HTML ändern, dass jeder div enthält nur den Text, den Sie es ausgeben möchten.

Beim Ausführen dieses Code-Snippets werden zwei leere Warnungen angezeigt. Dies liegt daran, dass zusätzliche Divs im Code-Snippet durch SO (versteckt) platziert werden. Diese zusätzlichen Warnungen werden in Ihrem lokalen Skript nicht angezeigt.

$(function Testing() { 
 

 
    $("div").each(function() { 
 
    var div_text = $(this).text(); 
 
    alert(div_text); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="Alpha">Alpha</div> 
 
    <div id="Bravo">Bravo</div> 
 
    <div id="Charlie">Charlie</div> 
 
    <div id="Delta">Delta</div> 
 
</body>

Verwenden Sie auch beschreibende Variablen. Es ist am besten, diese Übung jetzt zu beginnen (seit du lernst), so dass du keine schlechten Gewohnheiten formst. Ich habe als Beispiel Div zu div_text geändert.

Quelle

2017-03-22 18:26:11

Vielen Dank für Ihren Vorschlag. Ihre Lösung ist jedoch eher so, als würde man die Antwort auf den Punkt bringen, anstatt eine Lösung dafür zu finden. –

@GeorgeStoqnov Das HTML war seltsam strukturiert und, da du erwähnt hast, dass du lernst, dachte ich, es sei auch offen für Vorschläge. Nicht versuchen, etwas auszuweichen :) –

jQuery - Anzeigen divs eins nach dem anderen

Antwort

Verwandte Themen