logo标签列表

如何根据类名检查元素是否存在？

javascriptjqueryhtml
3

正如我在问题标题中提到的那样，我的元素没有id属性。那么我该如何检查它是否存在？

这是我的HTML代码：

<div class="classname">something</div>

注意1：如果像这样有一个id属性，我就可以做到。

var el = document.getElementById("idname");
if ( el ){
    console.log("exists");
} else {
    console.log("not");
}

但我想知道如何根据类名来实现这个功能..这是可能的吗？

Note2: 我使用 jQuery。

7个回答
1

使用原生JavaScript（不需要jQuery或其他库）：

var els = document.getElementsByClassName('className')
var first = els[0]

注意这是一个数组，因为可能有许多具有该类的元素。
使用jQuery：
var els = $('.className')

这将导致jQuery对象而不是DOM元素，因此最好使用length()方法来检查是否存在。
1

使用.length检查，因为如果存在，className将给出数组列表。

var el = document.getElementsByClassName("classname");
if ( el.length > 0 ){
    console.log("exists");
} else {
    console.log("not");
}
0
0
你可以尝试这样做：
if ($(".classname")[0]){ // do stuff }

这将使用jQuery选择器来获取所有具有该类名称的项目，并尝试访问第一个结果（位于位置0）。如果没有具有此类名称的元素，则无法执行此操作。

0

试试这个。这将展示如何在自动执行document.ready或单击按钮时获取类。

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>

<div class="classname">something</div>

</body>
<script type="text/javascript">
 // you can check the class name in document ready or in any other event like click


    //this will show all the class names of div when document ready.
 $(document).ready(function(){
  var the_class_name = $("div").attr('class');
  alert(the_class_name); // this put to show you the classs names

  if(the_class_name == "classneme")
  {
   //do your coding
  }
  else
  {
   //do your coding
  }
 });



 //if you want to get the class name when a button click and check if the class is exist

     $(document).ready(function(){
      $("div").click(function(){
       var classnames = $(this).attr('class');
       alert(classnames);

       if (classnames == "your_class_name") 
       {
        // your code here
       }
       else
       {
        // your code here
       }
      });
     });

</script>

</html>

0

试试这个：

if($('.classname').length > 0)
{
    alert('exist');
}
0
你可以使用这个：
var el = document.getElementsByClassName("classname");
if (el) {
    console.log("exists");
} else {
    console.log("not");
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接