Wrap substring of element content with an element using jQuery

str

I have a comma separated list of links like this:

<a href="#">link</a>,
<a href="#">link</a>,
<a href="#">link</a>,
<a href="#">link</a>,
<a href="#">link</a>,
<a href="#">link</a>
<div></div>

Now I would like to wrap the links from position 3 to the last so that it looks like:

$("a").eq(1).nextUntil("div").wrapAll('<span>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">link</a>,
<a href="#">link</a>,
<span>
    <a href="#">link</a>,
    <a href="#">link</a>,
    <a href="#">link</a>,
    <a href="#">link</a>
    </span>
<div></div>

I tried it like this:

    <a href="#">link</a>,
    <a href="#">link</a>,
    <span>
    <a href="#">link</a>,
    <a href="#">link</a>,
    <a href="#">link</a>,
    <a href="#">link</a>
    </span>
    <div></div>

However, this does not wrap the commas and the result looks as follows:

<a href="#">link</a>,
<a href="#">link</a>,
<span>
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
    </span> ,,,
<div></div>

How can I include the commas in the nesting?

Demo: http://jsfiddle.net/aa9GJ/1/

Reinstate Monica Cellio

Okay, I finally figured something out. You select the first element you want inside the span, and then you parse the DOM and make an element array yourself, rather than letting jQuery do it. Then you can wrap the array as you have done and it will include the commas...

$("a").eq(2).each(function(){
    var $elements = $(this);
    var next = this.nextSibling;
    while (next) {
        if ($(next).is("div")) {
            break;
        } else {
            $elements.push(next);
            next = next.nextSibling;
        }
    } 
   $elements.wrapAll('<span>');
});

Working jsfiddle example...

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Using Jquery wrap function with absolute placed element

From Dev

Wrap each line text to an element using JQuery

From Dev

Wrap element using v-if, otherwise just have content itself

From Dev

Wrap the contents of an element in a ".content" div

From Dev

wrap content inside parent element

From Dev

How to load the content of <h> element using jquery

From Dev

How to wrap a string using element from the list using jquery

From Dev

Replace a single letter wrap with span element using jquery

From Dev

Find parent of unwrapped element and use it in .wrap() using jquery

From Dev

Find parent of unwrapped element and use it in .wrap() using jquery

From Dev

Check for substring in element using javascript

From Dev

Index of a element in array using substring

From Dev

How to wrap an element with a div in jQuery?

From Dev

Wrap element after image with jquery

From Dev

Wrap text inside of an element with jQuery

From Dev

Pseudo element content with JQuery

From Dev

Using the Aurelia <content> element

From Dev

Using the Aurelia <content> element

From Dev

Can't substring multiline content in an element

From Dev

Directive, wrap content and keep attributes on original element

From Dev

Match an element and wrap other content that comes before matched element

From Dev

Match an element and wrap other content that comes before matched element

From Dev

How to prepend one element to another, ahead of existing content, using jQuery?

From Dev

How to get the html content of a clicked element using jQuery

From Dev

How to get parent element to grow with content using JQuery

From Dev

How to remove child element without losing the content using jquery?

From Dev

get the content of the prev element jquery

From Dev

jquery toggle content inside element

From Dev

traversing element content with jquery and greasemonkey

Related Related

  1. 1

    Using Jquery wrap function with absolute placed element

  2. 2

    Wrap each line text to an element using JQuery

  3. 3

    Wrap element using v-if, otherwise just have content itself

  4. 4

    Wrap the contents of an element in a ".content" div

  5. 5

    wrap content inside parent element

  6. 6

    How to load the content of <h> element using jquery

  7. 7

    How to wrap a string using element from the list using jquery

  8. 8

    Replace a single letter wrap with span element using jquery

  9. 9

    Find parent of unwrapped element and use it in .wrap() using jquery

  10. 10

    Find parent of unwrapped element and use it in .wrap() using jquery

  11. 11

    Check for substring in element using javascript

  12. 12

    Index of a element in array using substring

  13. 13

    How to wrap an element with a div in jQuery?

  14. 14

    Wrap element after image with jquery

  15. 15

    Wrap text inside of an element with jQuery

  16. 16

    Pseudo element content with JQuery

  17. 17

    Using the Aurelia <content> element

  18. 18

    Using the Aurelia <content> element

  19. 19

    Can't substring multiline content in an element

  20. 20

    Directive, wrap content and keep attributes on original element

  21. 21

    Match an element and wrap other content that comes before matched element

  22. 22

    Match an element and wrap other content that comes before matched element

  23. 23

    How to prepend one element to another, ahead of existing content, using jQuery?

  24. 24

    How to get the html content of a clicked element using jQuery

  25. 25

    How to get parent element to grow with content using JQuery

  26. 26

    How to remove child element without losing the content using jquery?

  27. 27

    get the content of the prev element jquery

  28. 28

    jquery toggle content inside element

  29. 29

    traversing element content with jquery and greasemonkey

HotTag

Archive