使用 jQuery 确定元素是否具有特定的后代元素

Question

我想确定 "li" 是否点击了其下方的 has/contains 和 "ul"。

<ul id="menu">
  <li>Item One</li>
  <li>Item Two
    <ul>
      <li>Sub One</li>
      <li>Sub Two B</li>
    </ul>
  </li>
  <li>Item Three</li>
</ul>

我的多次尝试总是 returns 正确，因为我的方法被认为考虑到了一切，包括 "this":

$('ul#menu li').click(function() {
  if ($(this).has('ul')) {
    ...do something...;
  }
  return false;
});

或

$('ul#menu li').click(function() {
  if ($(this).find('ul')) {
    ...do something...;
  }
  return false;
});

或再试一次：

$('ul#menu li').click(function() {
    if ($(this).filter(function( index ) {
        return $( "ul", this ).length >= 1;
        }) ) {
        ...do something...
    }
    return false;
});

我最终把它拼凑在一起，可行，但不够优雅：

$('ul#menu li').click(function() {
    var offspring = $(this).children().toArray();
    if (offspring.length == 3) {  //ul in object adds 2 to length
       ...do something... 
    }
    return false;
});

这似乎很简单，但我一定遗漏了一些基本的东西。

想法？

Answer 1

.has() return 是一个 jquery 对象，因此总是 return 为真。好像你需要检查它是否有任何匹配的元素 .length:

$('ul#menu li').click(function() {
  if ($(this).has('ul').length) {
    ...do something...;
  }
  return false;
});

使用 jQuery 确定元素是否具有特定的后代元素

Using jQuery determine if element has a particular descendent element

jquery

descendant