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 example

将产生：

<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/>'));
});

<强> Fiddle

在那里有多少li.text并且你需要创建多少个组并且在链接的帮助下不会丢弃和放弃元素，这并不重要。

如果ul中的li有一个类，请将以下li放入新的ul中

7 个答案: