JQuery добавляет открытие элемента к элементу, затем закрывает элемент после другого элемента

Question

Я просмотрел документацию jquery, и каждый пример, который я пробовал, вызывает у меня проблемы. У меня есть куча элементов списка с разными классами, я просто хотел бы добавить div () перед одним конкретным элементом li.

Тогда я бы хотел выбрать другой элемент списка и добавить закрывающий div ().

Когда я попробовал это, используя prependTo, append и т. Д., Но ни один из них не работает, так как они автоматически закрывают открываемый мной div. Мой код пока выглядит так:

<ul>
<li class="textbox email">This is the email list item</li>
<li class="textbox address">This is the address list item</li>
<li class="textbox aboutme">This is the aboutme list item</li>
</ul>

и я бы хотел, чтобы это выглядело как:

<ul>
<li class="textbox email">This is the email list item</li>
<div class="open"> <!-- div id opened here -->
<li class="textbox address">This is the address list item</li>
<li class="textbox aboutme">This is the aboutme list item</li>
</div> <!-- div is closed here -->
</ul>

В настоящее время, если я попытаюсь:

 $("<div>").prependTo(".email");//prependTo append at inside top

Выход автоматически закроет div как таковой:

<ul>
<div></div> <!-- div closed automatically instead of remaining open -->
<li class="textbox email">This is the email list item</li>
<li class="textbox address">This is the address list item</li>
<li class="textbox aboutme">This is the aboutme list item</li>
</ul>

Answer 1

Есть пример, чтобы обернуть div, используя HTML

<div class="container">
 <div class="selector">Hello</div>
 </div>

И JS Is

$( ".selector" ).wrap( "<div class='yourClass'></div>" );

, и HTML будет изменен как

 <div class="container">
  <div class='yourClass'>
   <div class="selector">Hello</div>
  </div>
 </div>

Answer 2

Гарри, извините, но вы ошиблись.

Ваше решение $(".email").after("<ul>").nextAll("li").appendTo($(".email").next()); создает недействительную разметку :

<ul>
    <li class="textbox email">This is the email list item</li>
    <ul>
        <li class="textbox address">This is the address list item</li>
        <li class="textbox aboutme">This is the aboutme list item</li>
    </ul>
</ul>

, поскольку элементы ul могут толькосодержат дочерние li элементы.В этом случае внешний ul имеет одного li и одного ul дочернего элемента, что семантически недопустимо.

---

То, что вы хотите, это:

<ul>
    <li class="textbox email">This is the email list item
        <ul>
            <li class="textbox address">This is the address list item</li>
            <li class="textbox aboutme">This is the aboutme list item</li>
        </ul>
    </li>
</ul>

Это допустимая разметка , поскольку оба элемента ul имеют только li дочерних элементов, а li может содержать другие ul внутри.Другими словами, у внешнего ul есть только один дочерний элемент (электронное письмо), который содержит в себе еще один список ul.

Итак, код для генерации правильной разметки выше:

// get the .address and .aboutme and wrap a UL around these two LIs
$(".email").nextAll("li").wrapAll("<ul class='open'>"); 

// move the recently created UL.open to the .email
$(".email").append($(".open"));

или, если вы предпочитаете все в одном акте, что-то вроде этого:

$(".email").nextAll("li").wrapAll("<ul class='open'>").parent().prev(".email").append($(".open"));

Answer 3

Вы должны знать, что эти jQuery append и prepend являются операциями, которые работают с деревом DOM, поэтому вы не можете просто изменить его таким образом.

Также помещать <div> внутри <ul> неправильно.

Пожалуйста, напишите, чего вы пытаетесь достичь, может быть, это можно сделать иным способом.

Answer 4

Изменить: этот ответ старый, и скрипка сломана.Пожалуйста, используйте ответ Gautum ниже (https://stackoverflow.com/a/26014879/1139444)

---

Как уже было сказано, это не очень хорошая идея, но вот демонстрация того, как вы можете сделать это с помощью jQuery.

jsFiddle

Как видно из кода, он вставляет div, а затем добавляет li к созданному элементу div. Все, что вам сейчас нужно, это добавить еще одну строку к addClass так что div имеет открытый класс.

Answer 5

Вы пытаетесь создать недействительный html, однако если вы действительно хотите, вам нужно переместить элементы <li> в div вместо добавления открывающих и закрывающих тегов. Однако из-за недопустимого характера HTML-кода в браузерах может наблюдаться противоречивое поведение.