使用 .after() 添加 html 关闭和打开标签

发布于 2024-12-23 17:38:53 字数 828 浏览 4 评论 0原文

我试图通过找到列表的中点并在 之后添加

 将无序列表分成两列。代码>.这可能是完全错误的方法，但这是我的想法。我的 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() 正在反转标签和输出的顺序：

< ;li>链接

链接

请让我知道是否有更好的方法来做到这一点，但我真的很想知道为什么 .after() 会颠倒顺序标签。谢谢

原文

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>

<ul></ul>

<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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天涯沦落人 2024-12-30 17:38:53

您不能将 DOM 修改视为编辑原始 HTML 文件。一旦浏览器解析了 HTML 文件，实际上它就不再存在了。唯一重要的是 DOM 表示。

考虑到这一点，让我们看一下您发布的代码...

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

您正在想象编辑 HTML 并添加结束标记和开始标记。事实并非如此。它根据该代码构建一个文档片段，然后将其添加为原始选择中元素的同级。由于不是 HTML 字符串的有效开头，因此它被删除。剩下的就是


< /code> 你就会明白了）。因此，一个空的 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(this);
});

这表示“中途让孩子们 (:gt)，分离它们与当前ul，将它们包装到一个新的ul，选择带有 parent 的 ul并插入它在当前ul之后（this)。”

工作 jsFiddle

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

回复收藏 0 原文

硪扪都還晓 2024-12-30 17:38:53

你不能向 DOM 添加半标签，只能添加完整元素。当您尝试时，浏览器会尽力更正代码，最终会得到

而不是

< /代码>。（实际结果可能因浏览器而异，因为它们有不同的策略来纠正不正确的代码。）

相反，请在第一个元素之后添加另一个 ul 元素，并将一半的项目移至其中：

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

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

});

You can't add half tags to the DOM, you can only add complete 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+')'));

});

回复收藏 0 原文

~没有更多了~