jquery if 语句检查元素是否在特定的父 div 中答案

【问题标题】：jquery if statement to check if element is within a specific parent divjquery if 语句检查元素是否在特定的父 div 中
【发布时间】：2012-08-18 13:47:48
【问题描述】：

我的布局中有很多带有 .button 类的元素。单击具有按钮类的元素后，我需要首先检查该元素是否在 box1 或 box2 的父 div 内。

一个简短的例子是......如果点击的按钮在 box1 div && （另一个条件）内，那么做一些事情。是否最好使用 .closet 和 .length 的组合来检查按钮是否在某个 div 内？

<div id="box1">
        <div id="column1">
             <div class="round_button"></div>
             <div style="background: #000">
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
             </div>
        </div>
 <div> 

<div id="box2">
        <div id="column2">
             <div class="round_button"></div>
             <div style="background: #000">
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
                  <div class="button"></div>
             </div>
        </div>
 <div>

【问题讨论】：

标签： javascript jquery if-statement parent children

【解决方案1】：

除了上面的答案，如果有多个按钮，而不是单独绑定一个事件，你只想附加一次，根据它的祖先，你可以做这样的事情：

$(".button").click(function() {
  if ($(this).is("#box1 *")) {}
});

【讨论】：

@undefined，我找不到。您认为错误在哪里？
@Cupidvogel 还有一个额外的(。
@user1502434，当按钮被点击时，你检查这个按钮是否是id为box1的元素的任何一个后代，如果是，你采取某种行动。此检查由if (($(this).is("#box1 *")) 完成。
太好了，我想这将是我的首选方法！非常好。
这与if($(this).closest("#box1").length)相比在效率方面如何？

【解决方案2】：

如果两组按钮的功能差异很大，我会在每组按钮上定义事件处理程序：

$('#box1 .button').on('click', function(event) {
  // ...
});

$('#box2 .button').on('click', function(event) {
  // ...
});

【讨论】：

【解决方案3】：

如果没有别的，你不需要if statement。

$('#box1, #box2').find('.button').click(function() {
  //  do something
});

【讨论】：

【解决方案4】：

在按钮的点击事件函数中使用$(this).parents("#box1");

【讨论】：

【解决方案5】：

$('#box1 .button').click(function() {
  // first code
});

$('#box2 .button').click(function() {
  // second code
});

【讨论】：