Using filter() to filter jquery based on parents

Question

I see on jquery documentation that I can use .parent() to filter my matched elements based on the parent. But in the process, the final result I get is the set of parent elements, not the original set of elements. So I see that I can use filter to achieve what I want. But I found so few documentation about how to use filter to filter based on the parent.

For example, my html is:

<div id="social">
    <a href="www.facebook.com">Facebook</a><br/>
    <a href="www.twitter.com">Twitter</a><br/>
</div>
<div id="topsites">
    <a href="www.facebook.com">Facebook</a><br/>
    <a href="stackoverflow.com">Stack Overflow</a><br/>
</div>

I want to get a set of elements, which consist of <a> tag that has facebook in it's href attribute, but within the social div parents.

I suspect the code will be something like this:

$('a[href*="facebook"]').filter( ... ).click(function() {

});

But I have absolutely no idea what to put on the filter. "parent#social" ?

Another way to put it is to use filter function.

$('a[href*="facebook"]').filter(function(index) {
    return ...
}
.click(function() {

});

I also don't know what code to put on the ... . Is it something like this.parent.id == "social" ? If possible, I prefer the first form, but if the solution can only be achieved by using the second form (filter function) then it's okay. Thank you very much.

Answer 1

.parent() doesn't filter, it traverses. It takes a jQuery object, that lists an array (of size [0, n) ), and generates a new jQuery object with each element's parent.

Getting a jQuery object with the list you're looking for is much simpler though...

CSS Selectors, which jQuery is based upon (with various extensions) are heirarchical by nature. That means selecting specific children of some parent(s) is quite trivial. a CSS selector to pick the element you want is:

#social a[href*="facebook"]

and if you use this inside a jQuery constructor, you'll get you object:

$('#social a[href*="facebook"]')