Question

如果p类在div类之前或之后出现，我试图将.image元素包含在单个<ul> <p>this is the first paragraph</p> <p>this is the second paragraph</p> <div class="image"></div> <div class="image"></div> <p>this is the third paragraph</p> <p>this is the fourth paragraph</p> </ul>中。目前，我只能围绕每个元素。

这是我的CSS：

$('p').wrap('<div class="new" />');
$('.image').wrap('<li />');

和我的jQuery：

{{1}}

这是我的JSFIDDLE：http://jsfiddle.net/BDqGe/

有人知道如何根据兄弟姐妹来包装元素吗？

Answer 1

首先，你的HTML无效，因为如果你看这里

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

ul的允许内容 - 零个或多个<li>元素，最终与<ol>和<ul>元素混合。

但是你可以使用prevAll()来包含所有元素，以获取所有以前的兄弟节点，.nextAll()来获取元素之后的所有兄弟节点 - 然后.wrapAll()将所有元素用单个元素包装

$('.image') // start at .image
       .prevAll('p') // <-- get all p's before .image
       .wrapAll('<div class="new" />') // wrap all in a div
       .end() // go back to .image
       .nextAll('p') // get all p's after .image
       .wrapAll('<div class="new" />') // wrap all in div
       .end() // go back to .image
       .wrap('<li />'); // wrap .image in li

FIDDLE

Answer 2

我的方法将是

var $ul = $('ul');
$ul.find('.image').wrap('<li />');

$ul.children('p').filter(function(){
    var $prev = $(this).prev();
    return $prev.length == 0 || $(this).prev().is(':not(p)')
}).each(function(){
    $(this).nextUntil(':not(p)').addBack().wrapAll('<li class="new"/>')
})

演示：Fiddle

根据兄弟姐妹的要求包裹元素

2 个答案: