有没有办法检查一个元素是否已经应用了jquery select2？

Question

我想将select2应用到页面上的一堆jquery元素，这些元素都具有相同的类名，但是如果我在已经调用了select2（）的元素上调用select2（），那么它就会爆炸。这是我的代码

 $('.MyDropdowns').each(function (i, obj) {
    $(obj).select2({ width: "455px" });
});

所以我想要这样的东西：

 $('.MyDripdowns').each(function (i, obj) {
    if (!$(obj).HasSelect2Initiatized)
    {
        $(obj).select2({ width: "455px" });
    }
});

有这样的事吗？

Answer 1

你可以检查元素是否具有select2属性

$('.MyDripdowns').each(function (i, obj) {
    if (!$(obj).data('select2'))
    {
        $(obj).select2({ width: "455px" });
    }
});

编辑

正如@ Fr0zenFyr在他对v4.0的评论中所说，你可以使用：

if (!$(obj).hasClass("select2-hidden-accessible"))

Answer 2

工作方案：

$('.MyDripdowns:not([class^="select2"])').each(function (i, obj) {
    $(obj).select2({width: "455px"});
})

链接：

1. ^= attribute starts with selector
2. :not selector

Answer 3

以上答案几乎是正确的。 但是当我们在同一页面上动态添加元素并将select 2应用于新创建的元素时，它会产生问题。 在那个时候，必须不仅使用类而且使用输入类型指定选择器。 PFB参考代码。

$('inputp[type="text"].MyDripdowns').each(curr_idx, curr_elem){
    //Check if select 2 is already applied or not
    if($(curr_elem).hasClass('.select2-offscreen')){
      //Select 2 is already applied to this element
    }
    else{
       //Apply Select 2 to this element 
    }
}

Answer 4

您可以使用try..catch检查Select2操作是否给出错误。如果抛出错误，则表示元素中没有Select2。

缺点是这仍然会在浏览器控制台中输出错误。

try {
    $(obj).select2("close")
} catch(err) {
    // No Select2 in the element
    $(obj).select2({ width: "455px" });
}