jQuery检测子元素的类

Question

我有一个按钮，当我点击它时我想显示另外两个按钮取消和确认。

当添加o 类时，会添加一个负边距并且按钮会消失。

$('.a_bttn_inner_action').click(function() {
  if ($(this).children().find('.button')) {

    $(this).parent().find('.button').queue(function(next) {
      $(this).addClass('o');
      next();
    });

    $(this).parent().find('.confirm.yes').delay(300).queue(function(next) {
      $(this).removeClass('o');
      next();
    });
    $(this).parent().find('.confirm.no').delay(100).queue(function(next) {
      $(this).removeClass('o');
      next();
    });

  } else if ($(this).children().find('.confirm.no')) {

    $(this).parent().find('.confirm.yes').delay(300).queue(function(next) {
      $(this).addClass('o');
      next();
    });
    $(this).parent().find('.confirm.no').delay(100).queue(function(next) {
      $(this).addClass('o');
      next();
    });

    $(this).parent().find('.button').queue(function(next) {
      $(this).removeClass('o');
      next();
    });
  }
});

li.o {
  margin-left: -800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bttn_inner_action">
  <ul class="action">
    <a href="#" class="a_bttn_inner_action">
      <li class="button ">Do something...</li>
    </a>
    <a href="#" class="a_bttn_inner_action">
      <li class="confirm no o">Cancel!</li>
    </a>
    <a href="#" class="a_bttn_inner_action">
      <li class="confirm yes o">Confirm...</li>
    </a>

  </ul>
</div>

使用 jQuery 我在if($(this).children().find('.button')) 和else if($(this).children().find('.confirm.no')) 遇到问题。

我想检测当前元素的哪些子元素被li 元素的类选中。

这可能吗？

---

我试过if($(this).children().attr('class') == 'button')还是不行。

Answer 1

要简单的知道点击了哪个按钮，可以使用click事件的target属性来获取html元素被点击=>

$('.elements').on('click', function(e){
     var $targer = $(e.target);
});

您可以在 jQuery 元素上使用 hasClass() jQuery 方法或 is() 方法来测试 jQuery/html 元素的属性。

我重写了您的代码 sn-p 保持逻辑，但更改了一些 html。查看点击元素（目标）的测试。

您的 html 格式错误，因为列表 ul 的子级必须是 li 元素。 所以你的 html 应该是这样的：

<div class="bttn_inner_action">
  <ul class="action">
    <li class="a_bttn_inner_action">
      <a href="#" class="button ">Do something...</a>
    </li>
    <li class="a_bttn_inner_action">
      <a href="#"class="confirm no o">Cancel!</a>
    </li>
    <li class="a_bttn_inner_action">
      <a href="#" class="confirm yes o">Confirm...</a>
    </li>
  </ul>
</div>

$('.button').click(function(e) {
  var $target = $(e.target);
  
  if ($target.hasClass('do-something')) {
    $('.button.confirm.yes').delay(300).queue(function(next) {
      $(this).parent('li').removeClass('o');
      next();
    });
    $('.button.confirm.no').delay(100).queue(function(next) {
      $(this).parent('li').removeClass('o');
      next();
    });
    
  } else if ($target.is('.confirm.no')) {
    $('.button.confirm.yes').delay(300).queue(function(next) {
      $(this).parent('li').addClass('o');
      next();
    });
    $('.button.confirm.no').delay(100).queue(function(next) {
      $(this).parent('li').addClass('o');
      next();
    });
  }
  
});

li.o {
  margin-left: -800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bttn_inner_action">
  <ul class="action">
    <li class="li_bttn_inner_action">
      <a href="#" class="button do-something">Do something...</a>
    </li>
    <li class="li_bttn_inner_action o">
      <a href="#"class="button confirm no">Cancel!</a>
    </li>
    <li class="li_bttn_inner_action o">
      <a href="#" class="button confirm yes">Confirm...</a>
    </li>
  </ul>
</div>

可以优化事件监听器。使用 $('.class').click() 函数，监听器被附加到每个 .class 元素。使用 $('parentElement').on('click', 'subElement', function(e){...}) 代替仅将一个事件侦听器附加到父元素。

见.on() function on jQuery doc。

Answer 2

答案是exists()函数。

---

以下声明：

$(this).children().find('.button')

即使没有选择任何元素，也返回一个长度为零的 JQuery 对象。

所以，if ($(this).children().find('.button')) 总是会被通过。

您可以检查返回对象的长度或使用JQuery exists()函数。

详情为here。

Answer 3

我相信这就是您所关注的。为了检查孩子，你可以使用

.find('.button').length

它将返回 0 或正整数，因此您可以在 if 中使用它。在您的代码中，第一个 if 始终为真，所以另一个永远不会运行。

$('.a_bttn_inner_action').click(function() {

  if ($(this).find('.button').length) {
    $(this).parent().find('.button').queue(function(next) {
      $(this).addClass('o');
      next();
    });

    $(this).parent().find('.confirm.yes').delay(300).queue(function(next) {
      $(this).removeClass('o');
      next();
    });
    $(this).parent().find('.confirm.no').delay(100).queue(function(next) {
      $(this).removeClass('o');
      next();
    });

  } else if ($(this).find('.confirm.no').length) {

    $(this).parent().find('.confirm.yes').delay(300).queue(function(next) {
      $(this).addClass('o');
      next();
    });
    $(this).parent().find('.confirm.no').delay(100).queue(function(next) {
      $(this).addClass('o');
      next();
    });

    $(this).parent().find('.button').queue(function(next) {
      $(this).removeClass('o');
      next();
    });
  }
});

li.o {
  margin-left: -800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
  <ul class="action">
    <a href="#" class="a_bttn_inner_action only-here">
      <li class="button ">Do something...</li>
    </a>
    <a href="#" class="a_bttn_inner_action">
      <li class="confirm no o">Cancel!</li>
    </a>
    <a href="#" class="a_bttn_inner_action">
      <li class="confirm yes o">Confirm...</li>
    </a>

  </ul>
</div>

Answer 4

children() 获取被选元素的所有直接子元素。 find() 获取所有子元素，一直到层次结构。

所以$(this).children() 将选择所有<li> 元素，然后find() 将查看那些<li> 的所有子元素，而不是<li> 本身

你想要的只是

$(this).find('.button').length 
//or
$(this).find('.confirm.no').length

//or you could just find the li itself and then test for the class
var button = $(this).find('li');
if(button.is('.button')){

} else if(button.is(".confirm.no")){

}

还请注意不要针对children() 或find() 的返回进行测试，因为两者都会返回一个新的jQuery 对象，或者实际上没有找到任何东西，因此结果将始终测试为真。

您也可以只将点击处理程序放在 LI 本身上，而不必担心将它们无效地包装在锚标记中

$('ul.action li').click(function() {
  var $this = $(this);
  if($this.is('.button')){

  } else if($this.is('.confirm.no')){

  }
});

Answer 5

您可以只检查 button 类的孩子数。

if ($(this).find('.button').length > 0) {
    // there are some
}