javascript - Using .after() to add html closing and open tags - Stack Overflow

admin管理员组

文章数量:1344645

I'm trying to split an unordered list into two columns by finding the halfway point of the list and adding </ul><ul> after that </li>. This could be the plete wrong way to do this but it is how I thought to do it. My js looks like this:

$('.container ul').each(function(){

    var total = $(this).children().length;
    var half = Math.ceil(total / 2) - 1;
    $(this).children(':eq('+half+')').after('</ul><ul>');

});

The problem I'm having and what I don't understand is that .after() is reversing the order of the tags and outputs:

<ul>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

<ul></ul>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

</ul>

Please let me know if there's a better way to do this, but I really would like to know why .after() is reversing the order of tags. Thanks

I'm trying to split an unordered list into two columns by finding the halfway point of the list and adding </ul><ul> after that </li>. This could be the plete wrong way to do this but it is how I thought to do it. My js looks like this:

$('.container ul').each(function(){

    var total = $(this).children().length;
    var half = Math.ceil(total / 2) - 1;
    $(this).children(':eq('+half+')').after('</ul><ul>');

});

The problem I'm having and what I don't understand is that .after() is reversing the order of the tags and outputs:

<ul>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

<ul></ul>

<li><a href="#">link</a></li>

<li><a href="#">link</a></li>

</ul>

Please let me know if there's a better way to do this, but I really would like to know why .after() is reversing the order of tags. Thanks

• javascript
• jquery
• html
• jquery-after

Share Improve this question Follow edited Mar 10, 2017 at 14:40 Mohammad 21.5k1616 gold badges5656 silver badges8484 bronze badges asked Jan 2, 2012 at 23:40 user1120130user1120130 6111 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

You can't think about DOM modification as if you were editing the original HTML file. Once the browser has parsed the HTML file, to all intents and purposes it no longer exists. The only thing that matters is the DOM representation.

With that in mind, let's have a look at the bit of code you've posted...

.after('</ul><ul>')

You're imagining this editing the HTML present and adding in a closing tag and an opening tag. It doesn't. It builds a document fragment from that code and then adds it as a sibling of the element in the original selection. Since </ul> isn't a valid beginning to a string of HTML, it is dropped. All you have left is <ul>, which is parsed as an element in its entirety (imagine an HTML document that went <div><ul></div> and you'll get the idea). So an empty ul element is inserted into the list as a sibling of the element you've selected: it's represented as <ul></ul> as this is the way to serialise a ul element to HTML.

To do what you want to do, you'll need to use a different approach, one that recognises what the DOM is.

$('.container ul').each(function(){
    var total = $(this).children().length;
    var half = Math.ceil(total / 2) - 1;
    $(this).children(':gt('+half+')').detach().wrapAll('<ul></ul>').parent().insertAfter(this);
});

This says "get the children after halfway (:gt), detach them from the current ul, wrap them in a new ul, select that ul with parent and insert it after the current ul (this)."

---

Working jsFiddle

You can't add half tags to the DOM, you can only add plete elements. When you try, the browser does it's best to correct the code, and you end up with <ul></ul> instead of </ul><ul>. (The actual result can differ between browsers, as they have different strategies for correcting incorrect code.)

Instead, add another ul element after the first, and move half of the items to it:

$('.container ul').each(function(){

  var total = $(this).children().length;
  var half = Math.ceil(total / 2) - 1;
  $(this).after('<ul/>').append($(this).children(':gt('+half+')'));

});

本文标签： javascriptUsing after() to add html closing and open tagsStack Overflow