Question

我们说我有以下HTML：

<div class"my-class">
    <div id="something">
        blah
    </div>
</div>
<div class"my-class">
    <div id="something-else">
        <a href="/" id="x">bluh</a>
    </div>
</div>

当我遍历类.my-class的所有元素时，我想找到一个包含id为#x的子元素（或上面例子中的子子元素）的元素。所以在上面的例子中，我想找到类.my-class的第二个元素。

这样的事情：

$(".my-class").each(function() {
    if ($(this).containsSubElementWithId("#x")){  // <= HOW CAN I DO THIS?
        // Do something with $(this)
    }
});

有人知道我如何测试一个元素是否包含具有特定id的另一个元素？欢迎所有提示！

Answer 1

有一种更简单的方法：

var matches = $(".my-class:has(#x)");
// Do something with the matching elements

JSFiddle： http://jsfiddle.net/TrueBlueAussie/kj1wzytw/

当您正在寻找一个只能进行一次匹配的基于ID的元素时，“最快”的搜索将是ID搜索，然后是closest：

e.g。

var matches = $('#x').closest('.my-class');

但是如果你有多个匹配项，（类或ID前缀等），请按照第一种方式进行。

e.g。（以x开头的ID：

var matches = $(".my-class:has([id^=x])");

JSFiddle： http://jsfiddle.net/TrueBlueAussie/kj1wzytw/2/

在现代浏览器中，类搜索通常与ID搜索一样快，因此最好使用类进行多次匹配。

e.g。

var matches = $(".my-class:has(.x)");

JSFiddle： http://jsfiddle.net/TrueBlueAussie/kj1wzytw/3/

Answer 2

您可以使用has()方法：

$(".my-class").each(function() {
    if ($(this).has("#x").length){
        // Do something with $(this)
    }
});

$(this).find('#x').length也可以。

Answer 3

尝试使用each()函数并检查特定元素的长度：

＆＃13;

var func = function() {
  $('.my-class').each(function() {
    var that = $(this);
    if (that.find('#x').length > 0) {
      console.log('found!');
      // that.something()...
    }
  });
}
  
func();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="my-class">
    <div id="something">
        blah
    </div>
</div>
<div class="my-class">
    <div id="something-else">
        <a href="/" id="x">bluh</a>
    </div>
</div>

＆＃13;

Answer 4

尝试 -

$(this).find("[id='x']");

检查 -

$(this).find("[id='x']").length;

Answer 5

试试这个：

var myClassElement = $(".my-class #x").parents('.my-class');
// Do something with myClassElement

如果你想对.my-class元素事件做一些事情，如果它不包含#x元素，请使用：

$(".my-class").each(function() {
    var containsXElement = $(this).find("#x").length > 0;
    if (containsXElement){
        // Do something with $(this)
    }
});

Answer 6

您可以使用closest：

直接选择元素，而不是迭代

var elem = $('.my-class #x').closest('.my-class');

既然id是唯一的，你也可以这样做：

var elem = $('#x').closest('.my-class');

Answer 7

$(".my-class").each(function() {

  if ($(this).find("a[id=x]")){
    //do whatever you want.
  }
});

Answer 8

如果您只想定位具有该元素的div，我建议您首先找到该元素，然后遍历最近的父div与所需的类：

var objhasx = $('#x').closest('.my-class');

Answer 9

遵循您的初步技巧：

$(".my-class").each(function() {
    var $this = $(this);
    // method 1
    if ($this.find("#x").length > 0) {
        // use $this
    }
    // method 2
    if ($this.find("[id='x']").length > 0) {
        // use $this
    }
});

更多@

如何查找元素是否包含id =＆＃39; x＆＃39;的子元素使用jQuery？

9 个答案: