Вопрос по html, jquery, dom-manipulation – jQuery добавить закрывающий тег, а затем снова открыть при использовании .before ()

1

У меня есть этот HTML:

    <ul>
        <div>
            <li>a</li>
            <li>b</li>
            <li class="break">c</li>
            <li>d</li>
            <li>f</li>
        </div>
    </ul>

Что я хочу это гдеclass="break" Я хочу родителяdiv закрыл и открыл новый, так что я в конечном итоге с этим:

    <ul>
        <div>
            <li>a</li>
            <li>b</li>
        </div>
        <div>
            <li>c</li>
            <li>d</li>
            <li>f</li>
        </div>
    </ul>

Теперь я попробовал это:

$(".break").before("</div><div>");

но jQuery не работает так, как я ожидал, а вместо этого переписывает то, что я ввел, и помещает пустоеdiv вместо. Вот так:

    <ul>
        <div>
            <li>a</li>
            <li>b</li>
            <div></div>
            <li class="break">c</li>
            <li>d</li>
            <li>f</li>
        </div>
    </ul>

Итак, как я могу достичь того, что я после?

Я не думаю<div> в<ul> является действительным HTML Andreas Wong
Цель состоит в том, чтобы разбить их на столбцы. Проблема в том, что меню, которое я показал, является очень упрощенным меню, а настоящее меню содержит много слоев. Brady
То, что сказал @andreas, верно, div в ul недействителен. Вместо того, чтобы делать это, какой конечной цели вы хотите достичь. Делить ли в колонках? Tim
Если не выполнимо сdiv Я был бы счастлив принять закрытие</ul> затем возобновить<ul> Brady

Ваш Ответ

2   ответа
8

Предполагая, что у вас есть следующая разметка:

<ul>
    <li>a</li>
    <li>b</li>
    <li class="break">c</li>
    <li>d</li>
    <li>f</li>
</ul>

И вы хотите превратить его в:

<ul>
    <li>a</li>
    <li>b</li>
</ul>
<ul>
    <li class="break">c</li>
    <li>d</li>
    <li>f</li>
</ul>

Вы можете использоватьnextAll () с участиемandSelf () чтобы получить элементы, которые вы хотите переместить, а затем создать новый<ul> и использоватьдобавление () переместить элементы:

var boundary = $("li.break");
$("<ul>").insertAfter(boundary.parent()).append(boundary.nextAll().andSelf());

Вы можете увидеть результаты вэта скрипка.

Начиная с jQuery 1.8, вы должны использовать addBack вместо andSelf. Louhike
Большое спасибо! Brady
Это спасло меня, так как я не мог вставить закрывающий тег там, где мне это было нужно. Спасибо! Benny Skogberg
0

Хорошо, в моем случае .. допустим, у меня было несколько li.break

поэтому следующее решение помогло мне

 $("li.break").each(function(){
     var boundary = $(this);
     $("<ul>").insertAfter(boundary.parent()).append(boundary.nextAll().andSelf());
 });    

проверь эту скрипкуhttp://jsfiddle.net/stLW4/127/ для большего понимания

Здравствуйте sid, это удивительно, но как я могу добиться того, чтобы li.break был обернут в тег ul, и другие будут работать так же, как вы сделали в js fiddle, так что на самом деле это будет 3 ul один для a и b другой для c, а затем для de can я достигну этого? Hassan

Похожие вопросы