3

我有以下 html 并想用 javascript 或 jquery 包装所有 li 的 div（它没有定义有多少 li）

<div class='example1'>
  <div class='example2'>
  <h1>Test</h1>
  <div class='example3'>
  <li></li>
  <li></li>
  ...
  <li></li>
  <li></li> 
</div>

结果应该看起来像

<div class='example1'>
  <div class='example2'>
  <h1>Test</h1>
  <div class='example3'>
  <div class='lis'>
    <li></li>
    <li></li>
    ...
    <li></li>
    <li></li>
  </div>    
</div>

我无法在现有的 html 中添加任何其他内容 :(

你能帮我么？

4

3 回答 3

8

你可以使用wrapAll：

$('li').wrapAll('<div class=lis></div>');

但是 HTML 规范规定LI元素只允许在UL,OL和MENU, 中不允许DIV。

示范

于 2013-01-11T09:02:44.423 回答
1

用这个 ：

(function($) {
$.fn.customWrap = function(wrapper) {
    if (!this.length) return this;
    var wrap = $(wrapper),
        sel = this.selector || this.get(0).nodeName.toLowerCase();
    return this.each(function() {
        var more = $(this).next(sel).length;
        console.log(this,more);
        $(this).replaceWith(wrap).appendTo(wrap);
        if (!more) wrap = $(wrapper);
    });
}
})(jQuery);

并像这样调用：

$(function() {
$('li').customWrap('<div class="lis"></div>');
});

或者您可以使用jQuery wrapAll但这会将所有内容都包装li 在页面中..而不是连续的..

在此处（使用 wrapAll）和此处（自定义函数）查看差异

于 2013-01-11T09:29:21.990 回答
0

您可以使用$.wrap()将匹配元素集包装在另一个元素中

于 2013-01-11T09:04:57.610 回答