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

As I mentioned in the title of my question, my element doesn't have id attribute. So how can I check whether it exists or not?

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

Here is my HTML:

这是我的HTML:

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

Note1: I can do that if there is a id attribute like this:

注1:如果有这样的id属性,我可以这样做:

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

But I want to know how can I do that based on the class name .. is it possible?

但我想知道如何根据班级名称这样做..是否可能?

Note2: I use jQuery.

注2:我使用jQuery。

7 个解决方案

#1

Vanilla javascript (without jQuery or any other lib):

香草javascript(没有jQuery或任何其他lib):

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

Notice that this is an array, since there could be many elements with that class

请注意,这是一个数组,因为该类可能有许多元素

With jQuery:

var els = $('.className')

this will result in a jQuery object instead of a DOM element, so you better use the length() method for checking existence.

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

#2

You need to use getElementsByClassName instead of getElementById. https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

您需要使用getElementsByClassName而不是getElementById。 https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

If using jQuery, please use class selector. https://api.jquery.com/class-selector/

如果使用jQuery,请使用类选择器。 https://api.jquery.com/class-selector/

#3

Try this:

if($('.classname').length > 0)
{
    alert('exist');
}

#4

You could try something like this:

你可以尝试这样的事情:

if ($(".classname")[0]){ // do stuff }

This will use the jquery selector to grab all items with that class name, and attempt to access the first result (in position 0). This will fail if there are no elements with this class name.

这将使用jquery选择器来获取具有该类名的所有项,并尝试访问第一个结果(在位置0)。如果没有具有此类名的元素,则会失败。

#5

You can use this:

你可以用这个:

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

#6

check with .length ,coz className will give you array list if exist

检查.length,如果存在,coz className将为您提供数组列表

var el = document.getElementsByClassName("classname");
if ( el.length > 0 ){
    console.log("exists");
} else {
    console.log("not");
}

#7

try this.this will show how to get the class in automatically document.ready or , when a button clicked.

试试这个。这将显示如何在自动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>

#1