javascript - jQuery 如果任何元素的父元素的 href 以以下开头

Question

所以我想要实现的是一种检查元素的父元素的 href 是否以某些内容开头的方法。这是我已经走了多远:

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

但这不是我想要的。我想检查该元素的父元素是否有以某些内容开头的 href。

有什么想法吗？

古斯塔夫

Answer 1

我建议，考虑到嵌套 <a>元素无效，因此只能有一个祖先 <a>元素(或者显然没有祖先 <a> 元素):

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

值得注意的是，如@A. Wolff did ，在下面的评论中，指出:

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

这意味着，如果单击的元素本身与提供给最接近的选择器匹配(因此是一个 <a> 元素，其中 href 以 x 开头)，则评估将返回 true，即使它不是祖先元素。我在写出选择器时认为这是一个功能，但我忘记在答案本身中详细说明这一点。

如果这被认为是一个错误，则使用 parents('a[href^=x]') 的选项代替closest('a[href^=x]')将更适合您的用例。

引用文献:

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