javascript - 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). child().find('.confirm.no')).

我想检测当前元素的哪个子元素是由 li 元素的类选择的。

这可能吗？

<小时/>

我尝试过 if($(this).children().attr('class') == 'button') 也不起作用。

Answer 1

我相信这就是您正在寻找的。要检查 child ，您可以使用

.find('.button').length

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

$('.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>