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。 :)

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试使用.appendTo()追加.content .box与当前元素相同data-res .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

将结果与jQuery

3 个答案: