if li in ul has a class, put following li in new ul

Question

i don't have access to some back-end stuff and i have no help. this is what i need to do, i need jquery code that will find the second class "text" and put it and the following li's in a new ul.

this

<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>

to this

<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>

I've tried a bunch of code but cant get it to work, any suggestions?

First of all , you don't NEED from us, but you ask TO us. In Second istance what did you try? Do you know how to code in javascript/jquery ? — steo, Jun 27 '13 at 16:04
It's not a simple as it looks unfortunately. My suggestion is to create a new set of `
` tags and move the `li.text` element and all subsequent li elements with it into the new list. See also this related question about splitting a list: http://stackoverflow.com/questions/1644668/jquery-split-long-ul-list-in-smaller-lists — Surreal Dreams, Jun 27 '13 at 16:04
is it possible to add custom class name? this is to make life easier — Ron, Jun 27 '13 at 16:06

score 2 · Answer 1 · answered Jun 27 '13 at 16:11

This oughta do it:

$('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

Will produce:

<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>

this was very helpful. thank you. you saved my wall a "forhead" shaped hole — wil lkh, Jun 27 '13 at 16:47

score 0 · Answer 2 · answered Jun 27 '13 at 16:05

Something like $("ul li") will return all of the list items in the order that they appear in the DOM. You can then loop through them and as soon as you find the second one, just do something like:

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

EDIT: Sorry, use before() not prepend().

score 0 · Answer 3 · answered Jun 27 '13 at 16:10

0

look into JQuery .wrap

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

answered Jun 27 '13 at 16:10

Trae Moore

1,759
3
17
32

score 0 · Answer 4 · answered Jun 27 '13 at 16:12

I prefer to do this using the most efficient way:

First, I add a custom class name (named 'first') to the first occurence of class 'text'.

<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>

Then, use jQuery function to find and replace the string to what we want:

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

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

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

Hope this helps

score 0 · Answer 5 · answered Jun 27 '13 at 16:12

0

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

Demo --> http://jsfiddle.net/RhMj9/5/

answered Jun 27 '13 at 16:12

Adil Shaikh

44,509
17
89
111

Seem to leave (or produce) and empty `
` at the end of the other lists.
– j08691 Jun 27 '13 at 16:13
@j08691 forgot to delete that empty ul from the markup... http://jsfiddle.net/RhMj9/5/ – Adil Shaikh Jun 27 '13 at 16:16

score 0 · Answer 6 · answered Jun 27 '13 at 16:19

0

In case you have more than 2 ul to do, you can use this code :

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

Fiddle : http://jsfiddle.net/HBXNk/

answered Jun 27 '13 at 16:19

Karl-André Gagnon

33,662
5
50
75

score 0 · Accepted Answer · answered Jun 27 '13 at 16:24

How about this:

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

Fiddle

It doesn't matter how many li.text's are there and how many groups you need to create and doesn't leave elements unwrapped and abandoned with the help of chaining.

if li in ul has a class, put following li in new ul

7 Answers7