0

如果元素出现在课程之前或之后，我会尝试将它们包装p在单个元素中。目前，我只能环绕每个单独的元素。div.image

这是我的CSS：

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

和我的 jQuery：

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

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

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

4

2 回答 2

0

我的方法是

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"/>')
})

演示：小提琴

于 2013-08-22T15:11:37.593 回答
0

你的 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

于 2013-08-22T13:44:37.443 回答