我正在使用 jQuery 动态生成一堆像这样的 div
:
<div class="mydivclass" id="myid1">Some Text1</div>
<div class="mydivclass" id="myid2">Some Text2</div>
我的代码中的其他地方需要检测这些DIV是否存在。这些div的类名相同,但每个div的ID都会更改。有什么想法可以使用jQuery进行检测吗?
我正在使用 jQuery 动态生成一堆像这样的 div
:
<div class="mydivclass" id="myid1">Some Text1</div>
<div class="mydivclass" id="myid2">Some Text2</div>
我的代码中的其他地方需要检测这些DIV是否存在。这些div的类名相同,但每个div的ID都会更改。有什么想法可以使用jQuery进行检测吗?
if ($(".className")[0]){
// Do something if class exists
} else {
// Do something if class does not exist
}
使用JavaScript
if (document.getElementsByClassName("className").length > 0) {
// Do something if class exists
}else{
// Do something if class does not exist......
}
if ($("#myid1").hasClass("mydivclass")){// Do any thing}
以下是一个非常简单的 JavaScript 检查类(hasClass)的解决方案:
const mydivclass = document.querySelector('.mydivclass');
// if 'hasClass' is exist on 'mydivclass'
if(mydivclass.classList.contains('hasClass')) {
// do something if 'hasClass' is exist.
}
使用此功能可以搜索整个页面
if($('*').hasClass('mydivclass')){
// Do Stuff
}
if ($(".mydivclass").length > 0) //it exists
{
}
if($(".myClass")[0] != undefined){
// it exists
}else{
// does not exist
}
if (document.getElementsByClassName("search-box").length > 0) {
// do something
}
var x = document.getElementsByClassName("class name");
if (x[0]) {
alert('has');
} else {
alert('no has');
}
if ($(".mydivclass").size()){
// code here
}
size()
方法只返回jQuery选择器选择的元素数,这里是指具有mydivclass
类的元素数。如果返回0,则表示表达式为假,因此没有任何元素;如果返回任何其他数字,则表示div存在。div
部分,原因有两个:1)选择器并不局限于OP使用div
元素的事实(它可能会在未来发生变化),2)在大多数浏览器和jQuery版本中,据我所知,这应该更快。 - Herman Schaaflength
属性也在那里,为什么不用呢?但如果这是你的偏好,那也没问题。另外,我不知道你把它编辑掉了。如果我要这样做,我会把它留下来(再次强调,他明确说过“…如果 div 包含…”(我的强调),然后还提到如果不管是不是 div
,都可以放弃该部分。但无论如何 :-)。” - T.J. Crowdersize()
方法存在是为了清楚地表明您正在计算jQuery选择器中的元素数量,而不仅仅是任何旧数组。但再次强调,这只是我的个人偏好。 - Herman SchaafjQuery(function($){
$("#btn1").click(function(){
if($(this).hasClass("demo")){
alert("HAS");
} else {
alert("NO HAS");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn1" class="demo">Show Text</button>