Question

我有跟随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 :(

你能帮帮我吗？

Answer 1

您可以使用wrapAll：

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

但HTML规范指定LI elements are only permitted in UL, OL and MENU，而非DIV。

Demonstration

Answer 2

使用此：

(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包装在页面中..而不是连续的.. {/ p>

查看差异here (with wrapAll)和here (custom function)

Answer 3

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

中

jQuery环绕很多元素的元素

3 个答案: