如何在特定子元素之后包装段落的内部内容?

问题描述 投票:1回答:4

我有几个bios,看起来像这样:

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</p>

不是最漂亮的文本块,但它们是由系统自动生成的。我需要遍历每个<p>并在第一组break标签之后取出所有内容并将其包装在像<div>之类的东西中。

最终结果将是:

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.</p>

<div class="theRest">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
  <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</div>
</p>
javascript jquery css-selectors next
4个回答
1
投票

试试这个(灵感来自@dave答案):

$("p").each(function(){

    // Add a div after the second <br /> (in the current <p>)
    $("br:eq(1)", this).after('<div class="theRest"> </ div>');

    // Split each "child" in an array
    $(this).contents().filter(function(index, elem){

        // Keep only children after the <div />
        return index > 3;

    // Remove and put them into the <div />
    }).detach().appendTo($(".theRest", this));
});

Fiddle


0
投票

试试这个:

$('p').each(function() {
    $(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
});

但这不是一个足够好的解决方案。

为防止包装其他p元素,您应该从以下任何父元素中找到:

$('.father').find('p').each(function() {
    $(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
});

0
投票

试试这个:

$($("p").contents().get(2)).after('<div class="theRest"></div>');
$("p").contents().filter(function(index, element) {
    return index > 3;
}).detach().appendTo(".theRest");

Fiddle


0
投票

即使从服务器返回的格式不符合我的标准,因为它使给定目的的事情变得复杂。然而,有一些技巧仍然有办法做到这一点。

说明:选择所有节点,丢弃第一个节点,因为它恰好是文本节点,然后使用jquery wrapAll方法获取该节点之后的所有节点并将其包装在新div中。

但是:ぁzxswい

http://jsfiddle.net/qe3bm92e/3/

你可以用var txt = $('.txt').contents(); txt.splice(0,1); txt.wrapAll($("<div>").addClass('red')); 替换'.txt',但这不是一个很好的做法,原因非常明显。

© www.soinside.com 2019 - 2024. All rights reserved.