javascript - jQuery-脚本未在项目的最后一行之后插入div

我正在使用此脚本在每行元素后插入一个div。麻烦的是，除非行已满，否则它不会在最后一行元素之后添加一个（即；如果该行仅包含1或2个元素，则不会添加div，但是如果有3个元素，则它不会确实）。

谁能帮我解决问题？

这是功能；

function separateRows(parent, children) {
    var panelHtml = '\
        <div class="team-member__panel"> \
        </div> \
    ';
    var $elems = $(parent + ">" + children);
    var top = $elems.first().offset().top;
    var n = 1;
    while( n < $elems.length && $elems.eq(n).offset().top == top )
        n++;
    var $div = $(panelHtml);
    $div.insertAfter(parent + ">" + children + ":nth-child(" + n + "n)");
}
separateRows(".team-members", ".team-member");

这是一个小提琴。
https://jsfiddle.net/zbqq782m/

最佳答案

您在每个第n个元素之后添加div。

因此，对于n = 3，请将其添加到第三和第六个元素之后。如果您有八个元素，则没有其他要插入的元素（如第九个元素）。

在这种情况下，您需要手动将其添加到最后一个元素之后：

function separateRows(parent, children) {
    var panelHtml = '\
        <div class="team-member__panel"> \
        </div> \
    ';
    var $elems = $(parent + ">" + children);
    var top = $elems.first().offset().top;
    var n = 1;
    while( n < $elems.length && $elems.eq(n).offset().top == top )
        n++;
    var $div = $(panelHtml);
    $div.insertAfter(parent + ">" + children + ":nth-child("+n+"n)");

    if (($elems.length % n) != 0) {
      $(panelHtml).insertAfter(parent+">"+children+":last");
    }

}
separateRows(".team-members", ".team-member");

关于javascript - jQuery-脚本未在项目的最后一行之后插入div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44518716/