結合jQuery的結果

Question

我有一個輸出一些數據的循環。每個循環都會爲輸出內容添加頁眉和頁腳。

<div class="box" data-res="4"> 
    <div class="header">header 4</div> 
    <div class="content">content 4a</div> 
    <div class="footer">footer 4</div> 
</div> 

<div class="box" data-res="4"> 
    <div class="header">header 4</div> 
    <div class="content">content 4b</div> 
    <div class="footer">footer 4</div> 
</div> 

<div class="box" data-res="4"> 
    <div class="header">header 4</div> 
    <div class="content">content 4c</div> 
    <div class="footer">footer 4</div> 
</div> 

<div class="box" data-res="5"> 
    <div class="header">header 5</div> 
    <div class="content">content 5</div> 
    <div class="footer">footer 5</div> 
</div> 

<div class="box" data-res="6"> 
    <div class="header">header 6</div> 
    <div class="content">content 6</div> 
    <div class="footer">footer 6</div> 
</div> 

我想合併具有相同數據屬性值並具有單個頁眉和頁腳的塊的內容。最終輸出應該如下所示：

header 4 
content 4a 
content 4b 
content 4c 
footer 4 

header 5 
content 5 
footer 5 

header 6 
content 6 
footer 6 

看起來似乎無法將我的想法包括在內。 這是我的JSFIDDLE

Answer 1

腳本中有一個錯字。該變量創建爲res，但您在下一行使用它作爲rid。解決該問題之後，代碼將起作用。

順便說一下，可以在JavaScript控制檯（F12）中找到錯誤消息。它也適用於jsFiddle。 :)

$('.box').each(function() { 
 
    var res = $(this).attr('data-res'), 
 
     box = $('.box[data-res="' + res /* <- there */ + '"]'); 
 

 
    
 
    if (box.length > 1) { 
 
     $(box).find('.header').not(':first').remove(); 
 
     $(box).find('.footer').not(':last').remove(); 
 
    } 
 
});

.box { 
 
    border-top: 1px solid #ccc 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box" data-res="4"> 
 
    <div class="header">header 4</div> 
 
    <div class="content">content 4a</div> 
 
    <div class="footer">footer 4</div> 
 
</div> 
 
<div class="box" data-res="4"> 
 
    <div class="header">header 4</div> 
 
    <div class="content">content 4b</div> 
 
    <div class="footer">footer 4</div> 
 
</div> 
 
<div class="box" data-res="4"> 
 
    <div class="header">header 4</div> 
 
    <div class="content">content 4c</div> 
 
    <div class="footer">footer 4</div> 
 
</div> 
 
<div class="box" data-res="5"> 
 
    <div class="header">header 5</div> 
 
    <div class="content">content 5</div> 
 
    <div class="footer">footer 5</div> 
 
</div> 
 
<div class="box" data-res="6"> 
 
    <div class="header">header 6</div> 
 
    <div class="content">content 6</div> 
 
    <div class="footer">footer 6</div> 
 
</div>

Answer 2

嘗試使用.appendTo()追加具有相同data-res作爲當前元素的.box.content，.not(":has(.content)")選擇.box其中.content除去，.detach()

$('.box').each(function() { 
    if ($(".box").not(this).data("res") === $(this).data("res")) { 
     $(".box[data-res="+$(this).data("res")+"]").not(this) 
     .find(".content") 
     .appendTo(
     $(".content:last", this) 
    ); 
     $(".box[data-res="+$(this).data("res")+"]") 
     .not(":has(.content)") 
     .detach() 
    } 
}); 

的jsfiddle http://jsfiddle.net/f3jxLz14/3/

Answer 3

我假設了你也想組合盒子。

function combineBoxes() { 
    $('.box').each(function() { 
     var thisBox = $(this); 
     var thisRes = $(this).attr('data-res'); 
     var nextBox = $(this).next('.box'); 
     var nextRes = nextBox.attr('data-res'); 

     if (nextRes === thisRes) { 
      var nextHtml = nextBox.find('.content'); 
      nextHtml.insertBefore(thisBox.find('.footer')); 

      nextBox.remove(); 

      combineBoxes(); 
     } 
    }); 
} 

combineBoxes(); 

Demo