如何在具有新数据属性的每个元素之前插入元素

Question

我有这个HTML代码：

<div id="elem">
    <div data-foo="aaa"></div>
    <div data-foo="aaa"></div>
    <div data-foo="aaa"></div>
    <div data-foo="bbb"></div>
    <div data-foo="bbb"></div>
    <div data-foo="ccc"></div>
    <div data-foo="ccc"></div>
    <div data-foo="ccc"></div>
    <div data-foo="ccc"></div>
    <div data-foo="ccc"></div>
</div>

我需要在第一个新的不同属性之前插入h1，如下所示：

<div id="elem">
    <h1>aaa</h1>
    <div data-foo="aaa"></div>
    <div data-foo="aaa"></div>
    <div data-foo="aaa"></div>
    <h1>bbb</h1>
    <div data-foo="bbb"></div>
    <div data-foo="bbb"></div>
    <h1>ccc</h1>
    <div data-foo="ccc"></div>
    .
    .

这些元素是动态插入的，但它们是有序的。 有人可以帮帮我吗？

Answer 1

每当data-foo发生变化时，请尝试在此上下文中使用.before()

var temp = "";
var foo = "";

$('#elem [data-foo]').each(function(){
  foo = $(this).data('foo');
  if(temp !== foo){
    $(this).before('<h1>'+ foo +'</h1>');
    temp = foo;
  }
});

DEMO

---

你的子问题1：

如何在每四个foo div之后添加一个div？

var count = 0;

$('#elem [data-foo]').each(function(){
    count += 1;
  if(count === 4){
    $(this).after('<div>New div</div>');
    count = 0;
  }
});

DEMO

Answer 2

试试这个......

$ (document).ready(function() 
    { PrevAttr= '';
        $('div#elem div').each(function(){

            attr = $(this).attr('data-foo');

            if(attr != PrevAttr)
            { PrevAttr = attr;
              $('<h1>'+attr+'</h1>').insertBefore(this);
            }
        })
})

您的子问题1： 如何在每四个foo div之后添加一个div？

你可以做到这一点

$('#elem [data-foo]:nth-child(4n)').after('<div class="test"></div>')

Answer 3

这是一个不涉及jQuery的答案：

function insertHeaders(element) {
    var lastAttribute = '';     
    var children = element.children;
    var length = children.length;

    for(var i=0; i < length; i++) {
        var child = children[i];
        var currentAttribute = child.getAttribute('data-foo');
        if(currentAttribute !== lastAttribute) {
            var header = document.createElement('h1');
            header.innerHTML = currentAttribute;
            element.insertBefore(header, child);
        }

        lastAttribute = currentAttribute;
    }
}

var container = document.getElementById('elem');
insertHeaders(container);

Fiddle here