Question

9

jQuery hasParent

rated 0 times [ 16] [ 7] / answers: 1 / hits: 62387 / 15 Years ago, fri, march 5, 2010, 12:00:00

The JQuery has method effectively selects all elements where they have particular descendants.

I want to select elements based on the fact they have particular ancestors. I know about parent([selector]) and parents([selector]) but these select the parents and not the children with the parents.

So is there an ancestor equivalent of has?

Note: I already have the context of an element further down the hierarchy and I will be selecting based on this so I can't do a top down query.

Update

I've obviously explained myself really badly here, so I'll try and clarify:

<ul class=x>

  <li>1</li>

  <li>2</li>

  <li>3</li>

</ul>

<ul class=y>

  <li>4</li>

  <li>5</li>

  <li>6</li>

</ul>

I have a jQuery object that already consists of elements 2,3,4 and 5. I want to select those elements who have a parent with the class = x.

Hope that makes more sense.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lucianom

Add To Favorites

Follow

Total Points: 601

Total Questions: 98

Total Answers: 109

Location: Kenya

Member since Fri, Dec 23, 2022

1 Year ago

lucianom questions

1 Map and sort data by date

Tue, Feb 22, 22, 00:00, 2 Years ago

1 Typescript axios typings

Wed, May 5, 21, 00:00, 3 Years ago

1 Ho can I add two values in Bootstrap range slider

Sun, Jan 24, 21, 00:00, 3 Years ago

1 Discord.js, async and await

Sat, Aug 15, 20, 00:00, 4 Years ago

1 How do I call a JS Function in another file?

Mon, Jun 22, 20, 00:00, 4 Years ago

View All

answered 15 Years ago manuel · Accepted Answer

For a clean re-usable solution, consider extending the jQuery.fn object with a custom method used for determining the presence of a particular ancestor for any given element:

// Extend jQuery.fn with our new method

jQuery.extend( jQuery.fn, {

    // Name of our method & one argument (the parent selector)

    within: function( pSelector ) {

        // Returns a subset of items using jQuery.filter

        return this.filter(function(){

            // Return truthy/falsey based on presence in parent

            return $(this).closest( pSelector ).length;

        });

    }

});

This results in a new method, $.fn.within, that we can use to filter our results:

$(li).within(.x).css(background, red);

This selects all list items on the document, and then filters to only those that have .x as an ancestor. Because this uses jQuery internally, you could pass in a more complicated selector:

$(li).within(.x, .y).css(background, red);

This will filter the collection to items that descend from either .x or .y, or both.

Fiddle: http://jsfiddle.net/jonathansampson/6GMN5/