jQuery，如果任何元素的父母的href都以

Question

So what I'm trying to achieve is a way to check if any of an element's parents' href begin with something. Here's how far I've come:

$('.element').click(function(e){
    if($(this).is('[href^="X"')){
        // How to check if the clicked element's href begins with X
    }
});

But this is not what I want. I wanna check if any of the element's parents have a href beginning with something.

Any ideas?

Gustaf

Answer 1

I'd suggest, given that nesting an <a> element is invalid so that there can be only one ancestor <a> element (or no ancestor <a> elements, obviously):

$('.element').click(function(e){
    // here we use a terribly-, but meaningfully-, named variable
    // to hold the Boolean result of the assessment;
    // the assessment looks from the clicked element up through
    // the ancestors for the first <a> element matching the
    // attribute-starts-with selector ([href^=x])
    // this will return either 1 or 0 elements.
    // we check the length; if it's equal to 1 then the ancestor
    // has an href starting with x, if it's 0 then there is either
    // no ancestor <a> element or no ancestor <a> element with a
    // href matching the attribute-starts-with selector:
    var ancestorAnchorStartsWithX = $(this).closest('a[href^=x]').length === 1;
});

It's worth noting, as @A. Wolff did , in the comments below, that:

… closest() [checks the] element itself too.

Which means that if the clicked element itself matches the selector supplied to closest (and is therefore an <a> element with an href beginning with x ) then the assessment will return true, even though it's not an ancestor element. I considered this a feature – while writing out the selector – but I forgot to detail that in the answer itself.

If this is considered a bug, then an option using parents('a[href^=x]') in place of closest('a[href^=x]') will be more appropriate to your use-case.

References:

• CSS:
  • Attribute-selectors .
• jQuery:
  • click() .
  • closest() .

Answer 2

 $(".element").click(function(e) { var res = $(this).parents("[href^=X]").is("*"); console.log(res); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <a href="Xabc123"> <div class="element">click</div> </a> 

Answer 3

This is what you want:

$('.element').click(function(e){
      var $parents=$(this).parents();
      var matches=$parents.filter('[href^="x"]');
      if(matches.length){
      }

    }
});