jquery 如何在特定子元素之后 Package 段落的内部内容？

vof42yt1 于 2023-06-22 发布在 jQuery

关注(0)|答案(4)|浏览(130)

我有几个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标记之后的所有内容，然后将其 Package 在类似<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>

jquery

来源：https://stackoverflow.com/questions/25690035/how-to-wrap-inner-content-of-a-paragraph-after-specific-child-element

4条答案

按热度按时间

whhtz7ly1#

试试这个（灵感来自@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）回复(0）举报 2023-06-22

7xllpg7q2#

试试这个：

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

但这不是一个足够好的解决方案。
为了防止你的其他p元素被 Package ，你应该从任何父元素中找到如下：

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

赞(0）回复(0）举报 2023-06-22

weylhg0b3#

试试这个：

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

Fiddle

赞(0）回复(0）举报 2023-06-22

3bygqnnd4#

即使从服务器返回的格式是坏的，从我的标准，因为它复杂的事情为给定的目的。不过，有了一些技巧，还是有办法做到的。
说明：选择所有节点，丢弃第一个节点，因为它恰好是文本节点，然后使用jquery wrapAll方法获取该节点之后的所有内容并将其 Package 在新的div中。

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

var txt = $('.txt').contents();
txt.splice(0,1);
txt.wrapAll($("<div>").addClass('red'));

您可以用'p'替换'.txt'，但这不是一个很好的实践，原因非常明显。

赞(0）回复(0）举报 2023-06-22

我来回答

jquery 如何在特定子元素之后 Package 段落的内部内容？

4条答案

相关问题

热门标签

最新问答