CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-lists
wil lkh
wil lkh

Reputation: 77

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

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?

Upvotes: 0

Views: 224

Answers (7)

PSL
PSL

Reputation: 123739

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.

Upvotes: 0

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

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/

Upvotes: 0

Adil Shaikh
Adil Shaikh

Reputation: 44740

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

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

Upvotes: 0

Ron
Ron

Reputation: 514

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

Upvotes: 0

j08691
j08691

Reputation: 207861

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>

Upvotes: 2

Trae Moore
Trae Moore

Reputation: 1787

look into JQuery .wrap

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

Upvotes: 0

GJK
GJK

Reputation: 37369

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().

Upvotes: 0

Related Questions