jquery html einfügen in die Liste, bevor eine untergeordnete ul-tag

Habe ich dieses:

  <ul id="pickme">
    <li>1</li>
    <li>2</li>
    <li>3
      <ul>
        <li>3-1</li>
      </ul>
    </li>
  </ul>

Aber wollen diese:

  <ul id="pickme">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li class="new_ul">
      <ul>
        <li>3-1</li>
      </ul>
    </li>
  </ul>

Mit anderen Worten ich das einfügen muss

</li><li class="new_ul">

nachdem die 3 in der Liste. Ich habe mit gespielt .Anhängen und .voran, aber ohne beeing in der Lage, legen Sie an der richtigen Stelle.

Jede Hilfe würde geschätzt

Br. Anders

Gibt es eine richtige Antwort unten. Wenn Sie diese verwenden, dann wird es ausgeführt, die sich nur über eine Ebene. Aber gleiche Beispiel ist in der Lage läuft durch mehrere levels. Ändern Sie einfach ('>li>ul') zu ('ul') und alle verschachtelte ul ' s werden gefunden und behandelt. Perfekt!

(laufen durch endlose Ebenen von verschachtelten ul)

$('#pickme').find('ul').each(function() {
    $(this).wrap('<li class="new_ul"></li>').parent().insertAfter($(this).parent().parent());
});

In diesem Fall:

  <ul id="pickme">
    <li>1</li>
    <li>2</li>
    <li>3
      <ul>
        <li>3-1
          <ul>
            <li>3-1-1</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

Werden:

  <ul id="pickme">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li class="new_ul">  <<new li
      <ul>
        <li>3-1</li>
        <li class="new_ul">  <<new li
          <ul>
            <li>3-1-1</li>
          </ul>
        </li>
      </ul>
    </li>
    </li>
  </ul>

InformationsquelleAutor Tillebeck | 2009-11-05

3

Wird dies für Sie arbeiten;
```
//get the #pickme element
var pickme = $('#pickme');

//find all the LI elements that are directly under #pickme
var pickmeLIs = pickme.find('>li');

//find all the UL elements that are directly under our found LI elements
var pickmeULs = pickmeLIs.find('>ul');

//loop through our UL elements
pickmeULs.each(function() {

    //wrap this UL element in the new LI element
    $(this).wrap('<li class="new_ul"></li>');

    //select the wrapping LI we just added to the UL element
    var wrapingLI = $(this).parent();

    //find our original parent LI element
    var originalParent = $(this).parent().parent();

    //move this and the new wrapping LI to the right place
    wrapingLI.insertAfter(originalParent);
});
```
diese werden kondensiert, nach unten zu;
```
$('#pickme').find('>li >ul').each(function() {
    $(this).wrap('<li class="new_ul"></li>').parent().insertAfter($(this).parent().parent());
});
```
- Sieht aus wie ein guter Ansatz, aber zwei parent() am Ende Recht? Wir wollen insertAfter die Eltern li sicherlich?
- Ja, aber durch die Zeit, die wir bekommen, um die Weitergabe der target-in die insertAfter wir haben bereits wickelte es in ein LI-element mit der wrap-Funktion.
- Oh, guter Punkt! Jau, schöne Arbeit.
- Sie bewegen könnte, es dann wickeln Sie es, die es ermöglichen würden, Sie zu entfernen Sie den zweiten Elternteil () - Aufruf.
- Thaks. Dies ist complext für mich. Ich muss zum starten einer frischen morgen und schau in den code und versuchen, es zu verstehen. Br. Anders
- Ich werde schreiben Sie einige Kommentare zu erklären, in eine langatmige version
- Was kann ich sagen... es funktioniert! Benutzt habe ich die kommentierte version und versuchen Sie zu verstehen, indem Sie durch die Schritte. Es ist toll. Ich poste meine Ergebnisse wieder hier. Vielen Dank. Sehr beeindruckend.
- Ich denke, ein block von html als string zurück. Was ich gelernt habe, ist, dass jQuery liest die gleichen 'string' als eine Sammlung von Elementen. Ansonsten kann ich nicht undestand wie es möglich wäre, zu wickeln und ul, die bereits innerhalb einer li ohne Fehler in der 'html-string'. Für mich gibt es immer noch elemenst of magick.
- du hast es Recht. im Grunde, wenn Sie einen html-string in das jQuery-Objekt konvertiert, die in ein Dokument-fragment document.createDocumentFragment() das ist im Grunde html, aber nicht mit dem Dokument verbundenen Körper noch. Sie können alles tun, die gleichen Dinge, die in etwas an das Dokument angehängt.
InformationsquelleAutor Matt Smith
2

Wenn Sie einen Weg wissen, wie viele Elemente der Liste gibt es in #pickme können Sie $('#pickeme li:eq(theIndex)') sonst, verwenden Sie diese:
```
$('#pickme li:last').after('<li class="new_ul"><ul><li>3-1</li></ul></li>');
```
~~Getestet und funktioniert.~~

UPDATE

Dank bobince und Myra, ich habe jetzt die folgenden, die genau das macht, was Sie für Fragen:
```
$('#pickme li:last-child').replaceWith('<li class="new_ul"><ul><li>3-1</li></ul></li>');
```
Ausgabe:
```
<ul id="pickme">
    <li>1</li>
    <li>2</li>
    <li class="new_ul">
      <ul>
        <li>3-1</li>
      </ul>
    </li>
</ul>
```
- Aber lässt das ursprüngliche 3-1 im Ort.
- Geändert... Dank bobince.
- Sie bewegen sich nicht die Elemente um Sie herum gibt, die Sie ändern die html der Seite. was ist, wenn es gibt bereits einige JavaScript-Ereignissen auf die Liste Elemente, die Sie entfernt haben.
- Mein Eindruck war, dass er einlegen wollte etwas neues, anstatt Dinge bewegen, aber du hast absolut Recht Matt.
- Wow!!! Was für eine Menge Antworten! Ich bin neu auf dieser Seite, die Hilfe ist überwältigend. Danke. Um es klarzustellen: ich weiß nichts von dem Inhalt jeder li. Den nur statische Teil ist dieser string "</li><li class='new_ul'>" eingefügt werden sollten, nur vor verschachtelte ul. Da ich nicht weiß, jQuery-sehr gut, ich (fälschlicherweise) erwartet, dass dies eine triviale Aufgabe ist gut für einen Anfänger zum üben 🙂 ich sehe, das ist nicht der Fall. Aber ich bin immer noch eine Menge zu lernen, so dass ich apreciationg alle Antworten und Kommentare.
- Jeeros >> Ihre Lösung wird verschoben, die letzten li eine verschachtelte ul, richtig? Das ist cool 🙂 Aber in meinem Fall brauche ich: 1) finden Sie eine li mit einem ul-innen. 2) fügen Sie ein weiteres li und bewegen Sie den ul zu dieser neuen li.
- Ich denke, die einfachste Möglichkeit wäre, zu finden, verschachtelte ul ' s ('#pickme ul') und fügen Sie diesen html-Recht vor, dass ul "</li><li class='ned_ul'>"
- Tillebeck, einige weitere Beschreibung in deiner Frage würde gehen einen langen Weg, um eine kurze Antwort beim nächsten mal! Herzlich willkommen auf Stack-Überlauf und erinnere mich so klar wie möglich Ihre Fragen. Cheers.
InformationsquelleAutor jay
1

last-Kind Selektor wird sichergestellt, dass Sie neues Element hinzufügen, nachdem es.

Können Sie das als

$('<li class="new_ul">4</li>').appendTo("ul#pick_me > li:last-child");
- Danke. Ich kann es nicht funktionieren. Aber abgesehen davon, dass die appendTo ist toll! Ich bin guite neuen mit jQuery so, dass viele af-Ahhhhh Erfahrungen in diesen Tagen
InformationsquelleAutor Myra
0

Verwenden .html(), der Sie in den inneren text. Die Bearbeitung der Zeichenfolge. Dann verwenden .html(newHtml), um den neuen text.

Ihr problem mit prepend und append ist, dass Sie nicht brauchen, um voranstellen oder anfügen zu können, müssen Sie in der Mitte (nach 3).
- Die Manipulation von HTML als string ist mühsam und unzuverlässig. Einstellung html() re-analysiert alle Knoten, verlieren alle nicht-serialisable Eigenschaften. Am besten vermieden werden.
- So stellen Sie eine bessere Antwort.
- Danke. Ich habe getan, ein bisschen Lesen auf .html-Code. Ich landete mit diesem (nicht ganz richtig) noch: var url_html = $(".sitemap-0 ul").parent().html(); $(".sitemap-0 ul").parent().html("</li><li class='nextLevel'>" + url_html); aber aus irgendeinem Grund die erste </li> wird nicht eingefügt. Html-validiert, bevor Sie einfügen, so dass ein end-tag kann nicht eingefügt werden, bevor ein start-tag? Ich bin verwirrt
InformationsquelleAutor Russell Steen

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.