Question

给出了以下HTML结构，无法更改：

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

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

$(".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>

重要提示：$recipients = [ ["name" => "John", "email" => "john@john.com"], ["name" => "Doe", "email" => "doe@doe.com"] ]; $subject = 'subject'; $meta = 'meta'; foreach($recipients as $recipient) { // here you declare variables accesable in view file $dataToPassToEmailView = []; // **key** of this table is variable **name in view** $dataToPassToEmailView['recipient'] = $recipient; Mail::send('emails.subscribed', $dataToPassToEmailView, function($message) use ($subject, $recipient, $meta) { $message->to($recipient['email'], $recipient['name']); $message->subject($subject); }); }代码后可以有一行，两行，甚至三行文字。

Answer 1

您需要在br中迭代.default元素并在循环中添加新标记。您可以使用Node.previousSibling和Node.nextSibling属性获取元素的上一个/下一个文本同级。

$(".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

＆＃13;

$(".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();

＆＃13;

.desc { color: red }

＆＃13;

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

＆＃13;

修改

如果您的html有多个<br>，则需要将br替换为自定义文本，并在换行后将目标文本替换为<br>。在示例中，我使用了[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>"); });

＆＃13;
＆＃13;
$(".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>"); });
＆＃13;
.desc { color: red }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以将id添加到“br”，并通过id列表wrapAll

<div id="id1">First</div><br id="id2">
<div id="id2">Second</div><br>
<div id="id3">First</div><br id="id4">

<script>
$("#id1,#id2,#id3,#id4").wrapAll("<div class='wraped'></div>")
</script>

如何使用jquery包装div的上一个和下一个兄弟文本？

2 个答案: