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

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