如何查找元素是否包含使用jQuery的id ='x'的子元素？

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类的所有元素我上面的例子），编号为#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：

例如

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

但如果你有多个可能的匹配，（类或ID前缀等），用第一种方法。

例如（IDS起开始x）：

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

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

一般类搜索几乎是一样快的ID搜索，在现代的浏览器，所以你会过得更好使用类为多个比赛。

例如

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

尝试用 -

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

对于检查它 -

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

Answer 4

试试这个：

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

如果你想要做的东西。我-class元素的事件，如果它不包含＃X元素使用：

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

Answer 5

相反迭代就可以直接使用closest选择元素：

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

现在，因为一个id是独一无二的，你也可以这样做：

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

Answer 6

尝试使用each()功能，并检查特定元素的长度：

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

<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>

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 
    } 
}); 

更多@

• https://api.jquery.com/id-selector/
• https://api.jquery.com/find/
• https://api.jquery.com/length/
• http://api.jquery.com/filter/