jQuery 判断父节点下是否有子节点

查找父节点下是否有子节点有两个情况：（1）查找的是父元素的所有后代节点；（2）仅查找父元素的第一代子节点。

<div id="app">
  <div>
    <span></span>
  </div>
  <div>
    <span><a></a></span>
  </div>
</div>

查找所有后代节点

has() 以及 find() 函数能找到父元素的子节点以及所有的衍生节点。查找的深度非常深，直到这个节点没有衍生的节点为止。

has

function hasDerivedNode(selector, find) {
  return !!$(selector).has(find).length;
}

hasDerivedNode("#app", "a"); // => true
hasDerivedNode("span", "img"); // => false

find

function hasDerivedNode(selector, find) {
  return !!$(selector).find(find).length;
}

hasDerivedNode("#app", "img"); // => false
hasDerivedNode("#app", "a"); // => true

查找第一代子节点

children()函数查找每一个元素的子节点，不包括衍生节点。查找的深度只有一层。

function hasChildNode(selector, find) {
  return !!$(selector).children(find).length;
}

hasChildNode("span"); // => true
hasChildNode("#app", "span"); // => false