Question

我尝试通过单击来包装内容容器的元素。对我来说，第一个困难是所有元素应该被包装到下一个div容器。在这个例子中只有p元素，但也可能有一些ul-lists或表。

HTML：

<div class="content">
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
    <div class="level_2">
        <div class="content">
            <p>Another Text</p>
            <p>Another Text</p>
            <p>Another Text</p>
            <p>Another Text</p>
        </div>
    </div>
</div>

这应该通过点击第一个内容容器来实现。

<div class="content">
<div class="mark_this">
    <p>Some Text</p>
    <p>Some Text</p>
    <p>Some Text</p>
</div>
    <div class="level_2">
        <div class="content">
            <p>Another Text</p>
            <p>Another Text</p>
            <p>Another Text</p>
            <p>Another Text</p>
        </div>
    </div>
</div>

JS：

$('.content').click(function() { // should be something like $('.content').children().click(function() {
    $(this).nextUntil('div, section').addBack().wrapAll("<div class='mark_this' />");
});

因为.content-container是嵌套的，我想最好检查.content-container中任何元素的点击并获取父元素。但上述困难对我来说是一样的。

Answer 1

我认为应该这样做：

$('.content').children().not("div").click(function() {  
 if(0 === $(this).parents("div.mark_this").length)    {
  $(this).parent("div").children().nextUntil('div').addBack().not('div').wrapAll("<div class='mark_this' />");}
});

工作演示：Wrap children until next div

将所有children元素包装到下一个div / section-element

1 个答案: