Question

这是我到目前为止尝试过的。但是，这三种解决方法都不起作用。

我尝试使用hasClass并找到它，但是没有运气。

HTML：

<div>Click me (I have a .cute class)
    <p class="cute"></p>
</div>

<div>Click me (I don't a .cute class)
    <p class="no-cute-class"></p>
</div>

jQuery：

$(document).ready(function(){
    $("div").click(function(){
        //Looking for siblings if has class of cute
        if($(this).siblings().hasClass('cute')) {
             alert("Found cute class");
        } else {
             alert("Didn't found cute class");
        }

        //jQuery hasClass
        if($(this).hasClass('cute')) {
             alert("Found cute class");
        } else {
             alert("Didn't found cute class");
        }

        //Using jQuery find
        if($(this).find('.cute')) {
            alert("Found cute class");
        } else {
            alert("Didn't found cute class");
        }
    });
});

Answer 1

我希望您想搜索名为.cute的类是否在您的元素内。但是您不能从p遍历到div。如下进行更好的更改，然后尝试。

您可以使用length找出那里的任何相关课程。

$("div").click(function(){
  if($(this).find('.cute').length > 0){
      alert('has class');
  }
  else{
      alert("no class");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Click me (I have a .cute class)
    <span class="cute"></span>
</div>

<div>Click me (I don't a .cute class)
    <span class="no-cute-class"></span>
</div>

Answer 2

您不能将div包裹在p标记内。

因为它在下面的浏览器中呈现-

<p> <div> test </div> </p>

在DOM中呈现为：

<p> </p> <div> test </div> <p> </p>

您也可以像下面一样使用span代替div或尝试JSFiddle

HTML代码-

<div>
  <p>Click me (I have a .cute class)
    <span class="cute"></span>
  </p>

  <p>Click me (I don't a .cute class)
    <span class="no-cute-class"></span>
  </p>
</div>

JS代码-

$("p").click(function() {
  if ($(this).find('.cute').length) {
    alert("Found Cute Class");
  } else {
    alert("Didn't found cute class");
  }
});

Answer 3

如果您想使用hasClass，请尝试以下操作：

$(document).ready(function(){
  $("div").click(function(){
    if($(this).find("p").hasClass("cute")){
      alert("has cute");
    }
    else{
      alert("no class");
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div>Click me (I have a .cute class)
    <p class="cute"></p>
  </div>
  <div>Click me (I don't a .cute class)
    <p class="no-cute-class"></p>
  </div>

确定父容器子元素是否包含特定类并执行某些操作的条件

3 个答案: