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

Question

Let's say I've got the following 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>

When I loop over all elements of class .my-class I want to find the one that contains a sub-element (or sub-sub-element like in my example above) with id #x . So in the example above I want to find the second element with class .my-class .

So something like this:

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

Does anybody know how I can test whether an element contains another element with a certain id? All tips are welcome!

Answer 1

There is an even simpler way:

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

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

As you are looking for an ID-based element, which can only have a single match, the "fastest" search would be an ID search, followed by closest :

eg

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

but if you have multiple matches possible, (class or ID prefix etc), go with the first way.

eg (ids starting starting with x ):

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

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

generally a class search is almost as fast as an ID search, on modern browsers, so you would be better off using a class for multiple matches.

eg

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

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

Answer 2

You can use the has() method:

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

$(this).find('#x').length will also work.

Answer 3

Try using each() function and check the length of the specific element:

 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 4

Try with -

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

For checking it -

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

Answer 5

Try this:

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

If you want to do something with .my-class element event if it doesn't contain #x element use this:

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

Answer 6

Instead of iterating you can directly select the element by using closest :

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

Now since an id is a unique, you can also do this:

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

Following your initial technique:

$(".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
    }
});

More @

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