Wrap/Break List elements by replace text to class

Question

My question is how to Wrap/Break list items by add Class find from list items text, example below?
My related question here: Wrap List elements by class name

Fiddle link

<div class="widget-content">
    <ul>
        <li><span class="label"> demo-text1 </span> Test Content</li>
        <li><span class="label"> demo-text2 </span> Test Content</li>
        <li><span class="label"> demo-text1 </span> Test Content</li>

        <li><span class="label"> demo-text2 </span> Test Content</li>
        <li><span class="label"> demo-text1 </span> Test Content</li>
        <li><span class="label"> demo-text2 </span> Test Content</li>
    </ul>
</div>

I want to break list items like this:

<div class="widget-content">
    <ul class="demo-text1">
        <li><span class="label"> demo-text1 </span> Test Content</li>
        <li><span class="label"> demo-text1 </span> Test Content</li>
        <li><span class="label"> demo-text1 </span> Test Content</li>

    </ul> <!-- Break part 1 -->

    <ul class="demo-text2">
        <!-- Break part 2 -->
        <li><span class="label"> demo-text2 </span> Test Content</li>
        <li><span class="label"> demo-text2 </span> Test Content</li>
        <li><span class="label"> demo-text2 </span> Test Content</li>
    </ul>
</div>

I mean break list items in two parts like second HTML example. Add class to both parent ul by replace text find from class="label"example given above (second HTML).

How can I do this simply by jQuery/JS ? Here is what I tried:

$(".widget-content").each(function() {
    var $li = $(this).find("li").unwrap(); // unwrap removes the old UL wrapper
    var uniq = [];

    // Create a collection of unique "label*" classes:
    $li.find("[class^=label]").attr("class", function(i, v) {
        if (!~$.inArray(v, uniq)) uniq.push(v);
    });
    // Group LI by A class, and wrap into a new UL with the same class
    $.each(uniq, function(i, klas) {
        $("a." + klas).closest("li").wrapAll($("<ul/>", {
            class: klas
        }));
    });
});

Thanks in advance.

Do you always want to split the list in to two no matter how many li there are, or do you want to split it in to multiple groups of 3? Also, please add the JS code you've written yourself to solve the issue. — Rory McCrossan
– Rory McCrossan, Commented Mar 11, 2016 at 14:42
becz, I'm learning JS, i always practice, here is my try: jsfiddle.net/yn60j368/1 — Aariba
– Aariba, Commented Mar 11, 2016 at 14:45
That's fine, we're all still learning. It just helps people answer your question when they can see how you've attempted to solve it, and if there's any bugs in your code which can be easily fixed. — Rory McCrossan
– Rory McCrossan, Commented Mar 11, 2016 at 14:47
yes, multiple groups by Text from class="label", means if there are different text on class="label" the please make new group. I mean split only when different text on class="label", hope you understand :-) — Aariba
– Aariba, Commented Mar 11, 2016 at 14:48

guest271314 · Accepted Answer · 2016-03-11 16:02:57Z

2

You can use .each(), $.each(), .html() , .text(), .trim()

var arr = []; // array to store `li` elements
var widget = $(".widget-content");

$(".widget-content li").each(function(index, el) {
  var html = el.outerHTML;
  // number at `label` text
  var curr = $(".label", this).text().trim().slice(-1);
  if (arr[curr - 1]) {
    arr[curr - 1].push(html)
  } else {
    arr[curr - 1] = [html];
  }
});

widget.html(""); // remove existing `html`

$.each(arr, function(key, val) {
  var li = val.join("");
  $(".widget-content").append($("<ul/>", {
    html: li,
    "class":$(li).eq(0).find(".label").text().trim()
  }))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="widget-content">
  <ul>
    <li><span class="label"> demo-text1 </span> Test Content</li>
    <li><span class="label"> demo-text2 </span> Test Content</li>
    <li><span class="label"> demo-text1 </span> Test Content</li>

    <li><span class="label"> demo-text2 </span> Test Content</li>
    <li><span class="label"> demo-text1 </span> Test Content</li>
    <li><span class="label"> demo-text2 </span> Test Content</li>
  </ul>
</div>

edited Mar 11, 2016 at 16:02

answered Mar 11, 2016 at 15:23

guest271314

1

Sign up to request clarification or add additional context in comments.

3 Comments

Aariba Over a year ago

Great, but trying to add class to parent ul by Text from class class="label", i mean find text on class="label" then replace the text to class, then add this class to each parent ul

Aariba Over a year ago

and there are 6 li items, why 4 lists? i'm trying to group list items to demo-text1 and demo-text2 class on ul

Aariba Over a year ago

Please check my second HTML example on question, i want this output.

Collectives™ on Stack Overflow

Wrap/Break List elements by replace text to class

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related