使用.after（）添加html关闭和打开标记 [英] Using .after() to add html closing and open tags

问题描述

我试图通过查找列表的中间点并在该列表中添加< / ul>< ul> ，将无序列表拆分为两列。 code>< /锂> 。这可能是完全错误的方式来做到这一点，但这是我想如何做到这一点。我的js看起来像这样：

  $（'。container ul'）。each（function（）{
 
 var total = $（this）.children（）。length; 
 var half = Math.ceil（total / 2） -  1; 
 $（this）.children（'：eq '+ half +'）'）。after（'< / ul>< ul>）; 
 
}）; 
  

我遇到的问题以及我不明白的是.after（）标签和输出的顺序：

< ul>

< li>< a href =＃>链接< / a>< / li>

< li>< a href =＃>连结< / a>< / li>

< li>< a href =＃>连结< / a>< / li>

< ul>< / ul>

$ b

< li>< a href =＃>链接< / a>< / li> 请让我知道是否有更好的方法来做到这一点，但我真的很想知道为什么.after（）会颠倒标签的顺序。谢谢


解决方案

您无法像修改原始HTML文件那样考虑DOM修改。一旦浏览器解析了HTML文件，所有意图和目的它就不再存在。唯一重要的是DOM表示。

考虑到这一点，让我们来看看你发布的代码中的一小部分......

$ b $

  .after（'< / ul>< ul>）
  

你在想象这个编辑HTML的存在，并添加了一个结束标记和一个开始标记。它没有。它从该代码构建一个文档片段，然后将其添加为原始选择中元素的兄弟。由于< / ul> 不是HTML字符串的有效开头，因此它会被删除。您剩下的所有内容都是< ul> ，它被完整地解析为一个元素（假设一个HTML文档已经放到< div>< ; ul>< / div> ，你就会明白了）。因此，一个空的 ul 元素作为您选择的元素的一个兄弟元素被插入到列表中：它被表示为< ul>< / ul> ，因为这是将 ul 元素序列化为HTML的方式。

要做你想做的事，你需要使用一种不同的方法，一种方法可以识别DOM是什么。

  $（'。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 ）; 
}）; 
  

这就是让孩子在半路上（ ：gt ）， detach 它们从当前 ul ， wrap 在 ul 中选择 ul code>与 父母 和 在当前 ul （ this ）。

---

工作jsFiddle

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

解决方案

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

这篇关于使用.after（）添加html关闭和打开标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！