如何包装< br>的上一个和下一个同级文本.使用jQuery的div? [英] How to wrap previous and next sibling text of <br> with div using jquery?

问题描述

已给出以下HTML结构，无法更改:

Following HTML structure is given and cannot be changed:

<div id="cone" class="team">
  <div class="default"></div>
  ...
  <div class="default">
    <img src="img.jpg" width="271" height="271" alt="" border="0"> First Text line<br> Second text line (optional)
    <img src="img.jpg" width="271" height="271" alt="" border="0"> First Text line<br> Second text line (optional) ...
  </div>
</div>

我想使用jQuery获得以下结果:

I want to get to the following result using jQuery:

<div id="cone" class="team">
  <div class="default"></div>
  ...
  <div class="default">
    <img src="img.jpg" width="271" height="271" alt="" border="0">
    <div class="desc">
      First Text line<br> Second text line (optional)
    </div>
    <img src="img.jpg" width="271" height="271" alt="" border="0">
    <div class="desc">
      First Text line<br> Second text line (optional)
    </div>
    ...
  </div>
</div>

我尝试过:

$(".team img").each(function () {
    $(this.nextSibling).wrap('<div class="desc"></div>');
});

但这仅包装第一行:

<img src="fileadmin/dateien/bilder/team/platzhalter_team.jpg" width="271" height="271" alt="" border="0">
<div class="desc">First Text line</div>
<br>
Second text line (optional)

重要提示:<img>标记后可以有一行，两行甚至三行文字.

Important: There can be one line, two lines, even three lines of text after the <img> Tag.

推荐答案

您需要迭代.default中的br元素，并在循环中添加新标签.您可以使用 Node.previousSibling 和 Node.nextSibling 属性.

You need to iterate br element in .default and add your new tag in loop. You can get previous/next text sibling of element using Node.previousSibling and Node.nextSibling property.

$(".default > br").each(function(){
    // Store previous/next sibling of br in variable then remove it.
    var prev = $(this.previousSibling).remove()[0].textContent;
    var next = $(this.nextSibling).remove()[0].textContent;
    // Insert new tag before br.
    $(this).before("<div class='desc'>" + prev + "<br>" + next + "</div>");  
}).remove(); // Remove br after loop

$(".default > br").each(function(){
    var prev = $(this.previousSibling).remove()[0].textContent;
    var next = $(this.nextSibling).remove()[0].textContent;
    $(this).before("<div class='desc'>" + prev + "<br>" + next + "</div>");
}).remove();

.desc { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cone" class="team">    
    <div class="default"></div> 
    <div class="default">       
        <img src="img.jpg" width="271" height="271" alt="" border="0">
        First Text line<br>
        Second text line (optional)
        <img src="img.jpg" width="271" height="271" alt="" border="0">
        First Text line<br>
        Second text line (optional)
        ...
    </div>
</div>

如果您的html有多个<br>，则需要用自定义文本替换br，然后换行，然后将目标文本替换为<br>.在示例中，我使用了[br].

If your html has multiple <br>, you need to replace br with custom text and after wrap, replace target text to <br>. In example i used [br].

$(".default").html(function(i, html){
    return html.replace(/<br>/g, "[br]");
});
$(".default > img").each(function(){
    $(this.nextSibling).wrap('<div class="desc"></div>');
});
$(".default").html(function(i, html){
    return html.replace(/\[br\]/g, "<br>");
});

$(".default").html(function(i, html){
    return html.replace(/<br>/g, "[br]");
});
$(".default > img").each(function(){
    $(this.nextSibling).wrap('<div class="desc"></div>');
});
$(".default").html(function(i, html){
    return html.replace(/\[br\]/g, "<br>");
});

.desc { color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cone" class="team">    
    <div class="default"></div> 
    <div class="default">       
        <img src="img.jpg" width="271" height="271" alt="" border="0">
        First Text line<br>
        Second text line (optional)<br>
        Third text line
        <img src="img.jpg" width="271" height="271" alt="" border="0">
        First Text line<br>
        Second text line (optional)<br>
        Third text line
        ...
    </div>
</div>

这篇关于如何包装< br>的上一个和下一个同级文本.使用jQuery的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！