javascript - Jquery .insertAfter() 多次插入

Question

我有一个网络应用程序，它使用 jquery 将一些 html 插入到 dom 中:

    $('<div />').html('<span class="' + someID + '-id">SomeText</span>').insertAfter($(".someidentifier"));

我遇到的问题是，可以有很多元素都带有 someidentifier 类，对于它们中的每一个，如果我有两个元素，这段代码将按照您想象的方式运行:

    <div class="someidentifier">Some text</div>
    <div class="someidentifier">Some text</div>

此代码将在 dom 中生成以下内容:

    <div class="someidentifier">Some text</div>
         <span class="3123564654-id">SomeText</span>
         <span class="3123564654-id">SomeText</span>
    <div class="someidentifier">Some text</div>
         <span class="3123564654-id">SomeText</span>
         <span class="3123564654-id">SomeText</span>

它应该在哪里:

    <div class="someidentifier">Some text</div>
         <span class="3123564654-id">SomeText</span>
    <div class="someidentifier">Some text</div>
         <span class="3123564654-id">SomeText</span>

所以我想到了使用 .next() 函数并检查下一个兄弟是否有我要输出的类，如果有则取消插入。这是我无法弄清楚的部分，因为我只是在说 insertAfter(jQueryObject) 并且我不知道如何拦截它并取消它。我应该注意我不能在它周围使用 if 语句，因为在这种情况下 jQueryObject 已经 div 了。

如果对象的 span 类为 3123564654-id 作为下一个兄弟对象，我能否修改选择器使其不包含该对象？

Answer 1

如果代码被执行多次，那么你可以过滤掉 someidentifier 元素，这些元素的下一个元素具有新的属性，比如

var someID = '3123564654';
var targets = $(".someidentifier").filter(function () {
    var $next = $(this).next();
    return !$next.length || !$next.children('span').hasClass(someID + '-id')
});
$('<div />').html('<span class="' + someID + '-id">SomeText1</span>').insertAfter(targets);

演示:Fiddle