jQuery-检查DOM元素是否已经存在

77

我试图通过带有jQuery的Ajax动态添加一些表单元素。我想确保不会两次创建相同的元素，所以我只想在尚未将其添加到DOM的情况下添加它。

我所有的元素都有一个唯一的CSS ID，例如：

$('#data_1')

我正在使用以下命令检查元素是否已存在：

if ($('some_element').length == 0) {
    //Add it to the dom
}

但是，它仅适用于首次加载时已属于页面的元素。

我还如何检查页面加载后动态创建的元素？

任何建议表示赞赏。

谢谢。

jquery

— 担
source

2

您的代码将适用于DOM中的所有元素，并通过JavaScript或呈现的HTML加载。

— 约翰·斯特里克勒

2

上面使用的方法.length应该适用于所有内容，无论它是随页面加载还是动态创建。

— 理查德·尼尔·伊拉根

好吧，猜想我那时一定有一个错误。

— 丹

接下来让我们看看您的其余代码

— mcgrailm 2011年

1

你不仅可以做if（$（'some_element'）。length）{//代码}

— Scott Romack 2012年

111

这对所有元素都有效，无论何时生成。

if($('some_element').length == 0) {
}

在ajax回调函数中编写代码，它应该可以正常工作。

— 拉胡尔
source

23

如果使用严格比较“ ===”而不是“ ==”会更好。只是一个最佳实践。

— Peeyush 2013年

18

这个问题是关于一个元素是否存在，所有答案都检查它是否不存在:)微小差异，但值得一提。

根据jQuery文档，推荐的检查存在的方法是

if ($( "#myDiv" ).length) {
    // element exists
}

如果您希望检查缺少的元素，则可以使用以下任一方法：

if (!$( "#myDiv" ).length) {
    // element doesn't exist
}

要么

if (0 === $( "#myDiv" ).length) {
    // element doesn't exist
}

请注意，在第二个选项中，我使用===，它比==快一点，并将0放在左边作为Yoda条件。

— 集电极
source

14

只是为了确认您以正确的方式选择了元素。试试这个

if ($('#some_element').length == 0) {
    //Add it to the dom
}

— sree
source

6

猜猜您忘记了将该项目附加到DOM。

在这里检查。

— Santosh Linkha
source

2

如果ID可用-您可以使用getElementById()

var element =  document.getElementById('elementId');
  if (typeof(element) != 'undefined' && element != null)
  { 
     // exists.
  }

或尝试使用Jquery-

if ($(document).find(yourElement).length == 0) 
{ 
 // -- Not Exist
}

— 伊山·in那
source

1

(()=> {
    var elem = document.querySelector('.elem');  
    (
        (elem) ? 
        console.log(elem+' was found.') :
        console.log('not found')
    )
})();

如果存在，则将指定元素吐出作为DOM对象。使用JQuery时，$('.elem')它只会告诉您它是一个对象（如果找到），但不会告诉您。

— 恶毒的
source

0

在这种情况下，您可能需要检查当前DOM中是否存在元素

如果要检查DOM树中是否存在元素（附加到DOM），可以使用：

var data = $('#data_1'); 
if(jQuery.contains(document.documentElement, data[0])){
    // #data_1 element attached to DOM
} else {
    // is not attached to DOM
}

— 马可
source

与其他答案相比，我看不出有什么更好的方法。

— vard 2015年

$（document）.find（yourElement）.length-检查元素是否存在于“内存”中，不必附加到dom jQuery.contains（document.documentElement，data [0]）-检查元素是否为IS

— 附加

$('#data_1').length如果element附加到dom，将返回1，否则返回0。如果还有其他结果，那就是在DOM更改之前已经完成了选择器。因此，只需$('#data_1')在需要检查选择器是否存在于dom时调用选择器即可完成这项工作-使用contains()毫无意义。

— vard 2015年

0

if ($('#some_element').length === 0) {
    //If exists then do manipulations
}

— Dipti S
source

解释答案的逻辑将有所帮助

— parishodak

0

不进行任何比较，您可以通过此方法简单地检查...，。

if(document.getElementById("url")){ alert('exit');}
if($("#url")){alert('exist');}

您还可以使用html（）函数以及

if($("#url).html()){alert('exist');}

— 因兹玛姆·哈桑（Inzmam ul Hassan）
source

-3

也考虑使用

$(document).ready(function() {});

不知道为什么这里没有人想到这一点（有点伤心）。您何时执行代码？？？一开始就对吗？然后，您可能想使用上面提到的ready（）函数，以便在加载整个页面（包括所有dom元素）之后而不是之前执行代码！当然，如果您运行一些在页面加载后添加dom元素的代码，这将毫无用处！然后，您只想等待这些功能，然后再执行代码...

— iii
source