如果ul中的li有一個類，請將以下li放入新的ul中

Question

我沒有訪問一些后端的東西，我沒有幫助。 這是我需要做的，我需要jquery代碼，它將找到第二個類“text”並將它和以下li放在一個新的ul中。

這個

<ul>
  <li class="text">TEXT</li>
<li class="subText">TEXT</li>
<li class="subText">TEXT</li>
<li class="subText">TEXT</li>
<li class="subText">TEXT</li>
<li class="text">TEXT</li>
<li class="subText">TEXT</li>
<li class="subText">TEXT</li>
<li class="subText">TEXT</li>
<li class="subText">TEXT</li>
</ul>

對此

<ul>
<li class="text">TEXT</li>
<li class="subText">TEXT</li>
<li class="subText">TEXT</li>
<li class="subText">TEXT</li>
<li class="subText">TEXT</li>
</ul>
<ul>
<li class="text">TEXT</li>
<li class="subText">TEXT</li>
<li class="subText">TEXT</li>
<li class="subText">TEXT</li>
<li class="subText">TEXT</li>
</ul>

我已經嘗試了一堆代碼，但無法讓它工作，任何建議？

Answer 1

這樣做：

$('li.text:first').nextUntil('li.text').addBack().wrapAll('<ul>');
$('li.text:eq(1)').nextAll().addBack().wrapAll('<ul>');
$('li.text:first').closest('ul').unwrap();

jsFiddle例子

會產生：

<ul>
    <li class="text">TEXT</li>
    <li class="subText">TEXT</li>
    <li class="subText">TEXT</li>
    <li class="subText">TEXT</li>
    <li class="subText">TEXT</li>
</ul>
<ul>
    <li class="text">TEXT</li>
    <li class="subText">TEXT</li>
    <li class="subText">TEXT</li>
    <li class="subText">TEXT</li>
    <li class="subText">TEXT</li>
</ul>

Answer 2

像$("ul li")之類的東西將按照它們在DOM中出現的順序返回所有列表項。 然后你可以遍歷它們，一旦找到第二個，就做一些像：

$("li").before("</ul><ul>")

編輯：對不起，使用before()而不是prepend() 。

Answer 3

看看JQuery .wrap

// do some checks
    $(".someclass").wrap("<ul></ul>");

Answer 4

我更喜歡使用最有效的方式：

首先，我在類'text'的第一個出現時添加一個自定義類名（名為'first'）。

<ul>
  <li class="text first">TEXT</li>
  <li class="subText">TEXT</li>
  <li class="subText">TEXT</li>
  <li class="subText">TEXT</li>
  <li class="subText">TEXT</li>
  <li class="text">TEXT</li>
  <li class="subText">TEXT</li>
  <li class="subText">TEXT</li>
  <li class="subText">TEXT</li>
  <li class="subText">TEXT</li>
</ul>

然后，使用jQuery函數查找並替換我們想要的字符串：

var myHTMLcontent = $("ul").html();

var newContent=myHTMLcontent.replace('<li class="text">','</ul><ul><li class="text">');

$("ul").html(newContent);

希望這可以幫助

Answer 5

$('ul .text').eq(1).prev().nextAll().appendTo($('<ul>').insertAfter('ul:first'));

演示--> http://jsfiddle.net/RhMj9/5/

Answer 6

如果你有超過2個ul ，你可以使用這個代碼：

$('li').unwrap()
$('.text').each(function(){
    $(this).nextUntil('.text').addBack().wrapAll('<ul>')
})

小提琴： http ： //jsfiddle.net/HBXNk/

Answer 7

這個怎么樣：

$('ul').find('li.text').unwrap().each(function () {
    $(this).nextUntil('.text').andSelf().wrapAll($('<ul/>'));
});

小提琴

無論有多少li.text存在，你需要創建多少組，並且不會在鏈接的幫助下將元素展開並放棄。