Question

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

这是我的HTML：

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

注1：如果有id属性，我可以这样做：

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

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

注2：我使用 jQuery 。

Answer 1

Vanilla javascript（没有jQuery或任何其他lib）：

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

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

使用jQuery：

var els = $('.className')

这将导致jQuery object而不是DOM元素，因此您最好使用the length() method来检查是否存在。

Answer 2

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

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

Answer 3

试试这个：

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

Answer 4

您可以尝试这样的事情：

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

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

Answer 5

您可以使用：

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

Answer 6

使用.length进行检查，如果存在，则coz className将为您提供数组列表

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

Answer 7

尝试此操作。这将显示如何自动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>

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

7 个答案: