如何检查一个 HTML 元素是否包含另一个元素？答案

【问题标题】：How to check if a HTML element contains an other one?如何检查一个 HTML 元素是否包含另一个元素？
【发布时间】：2017-08-04 12:27:35
【问题描述】：

我想检查我的标题 <h3> 是否有 highlight 类，所以我创建了 How to check if element contains specific class attribute，但我不确定如何使其适合我的用例，因为它不是包含类，但里面的跨度：

我试着做这个代码：

$('.liContainer div h3').each(function(i, obj) {
      var contains = false;
      String classes = obj.getAttribute("class");
      for (String c : classes.split(" ")) {
          if (c.equals("highlight")) {
              contains = true;
          }
      }
      if(contains){
        obj.classList.remove("highlight");
      }
    });

但实际代码出现错误：

imports/ui/layout.js:42:13: Unexpected token (42:13)

这就是String classes = obj.getAttribute("class");

有人可以帮我让它工作吗？ [编辑] 在您的回答的帮助下，我现在在这里：

'click .liContainer div h3': function(e){
       if ( $(e.target).find("span").is(".highlight") ) {
            console.log("it was highlighted");
           $(e.target).find("span").removeClass('highlight');
       }
  },

效果很好，谢谢大家

【问题讨论】：

使用.hasClass()
@guradio 你有例子吗？
$("#nameMachine h3 span").hasClass("highlight") 将返回 true 如果有类

标签： javascript jquery html css

【解决方案1】：

if ($('#parent').find('#child').length) {

 }

【讨论】：

为什么在他提供正确的解决方案时拒绝这个答案！
给出一个没有解释的代码根本不是答案。仅供参考，我的反对票不是@amd

【解决方案2】：

$('h3').filter(function(){
   return $(this).find('span.highlight').length != 0;
}) // do something with it

【讨论】：

【解决方案3】：

这样就可以了。 hasClass 文档在这里

$("#nameMachine h3").hasClass("highlight")

【讨论】：

这将选择h3 他搜索包含类的跨度

【解决方案4】：

一个粗略的方法来知道你是否不知道有子选择器

$('#nameMachine *').hasClass('yourClass'); // either true or false

【讨论】：

选择所有孩子可能有点矫枉过正。
是的，但如果 OP 只想知道类是否存在于 DOM 下方的某个地方，则可以使用

【解决方案5】：

    I hope it will help you

        $('.liContainer div h3').each(function(i, obj) {
           if ( $(this).find("span").is(".highlight") ) {
               // do something
           }
        });

    **can you just help me to do the action only on the clicked h3?**

    If `click` action:

        $('.liContainer div h3').click(function() {
           if ( $(this).find("span").is(".highlight") ) {
               // do something
           }
        });

    I use your code, and change the content of the `each` loop.
    You loop each `<h3>` and check if child `<span>` has class `.highlight`, then you do something...

    The above Code can also be written as follows:

    $('.liContainer div h3').click(function() {
           if ( $(this).find("span.highlight") ) {
               // do something
           }
        });
Hope this works fine.

【讨论】：

也许我最终会使用你的，你能不能帮我只在点击的h3 上执行操作？

【解决方案6】：

Try using `has` selector as given below code :

    $('.liContainer div h3:has(span.highlight)').each(function(){
       // code here
    });

【讨论】：

【解决方案7】：

既然你用的是jquery，那么这个简单的解决方案怎么样：

$('.liContainer div h3 .highlight').removeClass('highlight');

【讨论】：

用.hasClass()怎么样？
@AbhishekPandey 这个删除了所有的，所以它可以完成这项工作，但一个好的改进是删除我点击的元素的类
我想检查我的标题
是否有类突出显示
，如果 .highlight 不是 .liContainer 的子级怎么办？
@AbhishekPandey 我会自己尝试，因为这个答案可以完成工作。但是.highlight只能在.liContainer中（因为我是这样编码的）

【解决方案8】：

你可以试试：

if( $("h3", "#nameMachine").has(".highlight") ) {
// do something 
}

或者更具体的版本：

if( $("> h3", "#nameMachine").has("span.highlight") ) {
// do something
}

【讨论】：

【解决方案9】：

$('span.highlight','.liContainer div h3').removeClass('highlight')

请注意，第二个 css 选择器是确定搜索第一个 css 选择器的范围。

【讨论】：

【解决方案10】：

find() 将搜索所有子元素。所以如果有想要的类，它的长度将是 1 else length is 0。

$('.liContainer div h3').each(function(i, obj) {
    var hasClass = $(obj).find(".highlight");            
      if (hasClass.length) {
        hasClass[0].classList.remove("highlight");
      }
});

【讨论】：

是否有类突出显示