jquery获取'h3'标签后每个'div'的数量

时间:2013-08-31 21:26:56

标签: javascript jquery html dom

我想知道位于父div内且h3

div标记的兄弟姐妹中有多少content-block-infos-events

如果某些金额少于6件,我想创建divs标签,这样我每次h3

之后总能达到6件

例如:

<div class="content-block-infos-events" >
  <h3>H3 val</h3>
  <div class="views-row rows>
    TEXT 1
  </div>
  <div class="views-row rows>
    TEXT 2
  </div>
  // i have to add 4 another <div class="views-row rows>


  <h3>H3 val</h3>
  <div class="views-row rows>
    TEXT 1
  </div>
  <div class="views-row rows>
    TEXT 2
  </div>
  <div class="views-row rows>
    TEXT 3
  </div>
  <div class="views-row rows>
    TEXT 4
  </div>
  <div class="views-row rows>
    TEXT 5
  </div>
  <div class="views-row rows>
    TEXT 6
  </div>
  // no need to add the div because i have 6 divs
</div>

在这里你可以找到html代码:http://jsfiddle.net/Axdh6/2/

1 个答案:

答案 0 :(得分:1)

您应该遍历div元素并选择其下一个兄弟元素直到下一个h3元素,而不是选择在这种情况下无用的兄弟h3元素。

$('.content-block-infos-events h3').each(function() {
    var $divs = $(this).nextUntil('h3'),
        div_count = $divs.length;
    if (div_count < 6) {
        var divs = '';
        for (var i = 0; i < (6 - div_count); i++) {
            divs += "<div class='views-row rows'>added-text</div>";
        }
        $divs.last().after(divs);
    }
});

http://jsfiddle.net/6s88v/