Jquery .insertAfter(） 多次插入

Jquery .insertAfter() inserts multiple times

本文关键字：插入 insertAfter Jquery      更新时间：2023-09-26

我有一个使用jquery将一些html插入dom的Web应用程序： 

    $('<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了。

如果对象具有3123564654-id类的span作为下一个同级，是否可以修改选择器以不包含该对象？

如果代码被多次执行，那么你可以过滤掉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);

演示：小提琴

如何检查类似...

if ( $(this).has(someID).length == 0) ) 
    {
        $(this).append('whateverYouNeedToAppendHere');
    }
相关文章：