jQuery

Question

有什么方法可以检查给定变量是非空 jQuery 对象还是本机 DOM 元素？

所以会像

isDomElem( $("#some-existing-element") ); //returns true
isDomElem( $("#some-existing-element")[0] ); //returns true
isDomElem( $("#non-existing-element")[0] ); //returns false
isDomElem( "#some-existing-element" ); //returns false
isDomElem( [0,1,2] ); //returns false
//etc...

Answer 1

您可以使用instanceof 来检查传入的对象是instanceof jQuery 还是instanceof HTMLElement。如果是return true;。否则，return false.

function isDomElem(obj) {
      if(obj instanceof HTMLCollection && obj.length) {
          for(var a = 0, len = obj.length; a < len; a++) {
              if(!checkInstance(obj[a])) {
                  console.log(a);
                  return false;   
              }
          }     
          return true;                
      } else {
          return checkInstance(obj);  
      }

      function checkInstance(elem) {
          if((elem instanceof jQuery && elem.length) || elem instanceof HTMLElement) {
              return true;  
          }
          return false;        
      }
}

可选地，您可以执行一些其他操作，而不是返回 true 或 false。您还可以拆分每个选项并根据对象是 jQuery 或 HTMLElement 的实例执行单独的操作。您有很多选择。

$(function () {
  var temp1 = $('div'),
      temp2 = $('div')[0],
      temp3 = "foo",
      temp4 = ['bar'],
      temp5 = $('span'),
      temp6 = document.getElementsByClassName("test");
  
  alert(isDomElem(temp1));
  alert(isDomElem(temp2));
  alert(isDomElem(temp3));
  alert(isDomElem(temp4));
  alert(isDomElem(temp5));
  alert(isDomElem(temp6));
  
  function isDomElem(obj) {
    
      if(obj instanceof HTMLCollection && obj.length) {
        
        for(var a = 0, len = obj.length; a < len; a++) {
            if(!checkInstance(obj[a])) {
                return false;   
            }
        }
               
        return true;
               
      } else {
          return checkInstance(obj);  
      }
        
      function checkInstance(elem) {
          if((elem instanceof jQuery && elem.length) || elem instanceof HTMLElement) {
              return true;  
          }
          return false;        
      }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<p class="test"></p>
<p class="test"></p>

编辑：

@RickHitchcock 关于函数返回一个没有匹配元素的 jQuery 的实例提出了一个非常有效的观点。出于这个原因，我更新了函数以不仅考虑对象是否是 instanceof jQuery，而且考虑对象是否有长度，指示是否找到 DOM 元素。

编辑：

根据 @AdamPietrasiak 下面关于 HTMLCollections 返回 false 的实例的评论进行了额外的编辑。在这种情况下，如果传入的 obj 是 HTMLCollection 的实例，则每个元素都会传递给内部 checkInstance 函数。任何不是 DOM 节点的元素都会触发函数抛出整体 false 而不管列表中是否有元素（即对于 HTMLCollection 的实例，函数将其视为全有或全无）。

Answer 2

我认为这涵盖了所有情况：

console.clear();
function isDomElem(el) {
  return el instanceof HTMLElement || 
         el[0] instanceof HTMLElement ?
         true : false;
}

console.log(isDomElem($("#some-existing-element"))); //returns true
console.log(isDomElem($("#some-existing-element")[0])); //returns true
console.log(isDomElem($("#non-existing-element"))); //returns false
console.log(isDomElem("#some-existing-element")); //returns false
console.log(isDomElem([0,1,2])); //returns false
console.log(isDomElem(document.getElementsByClassName("a"))); //returns true

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="some-existing-element" class="a"></div>
<div class="a"></div>

jQuery - 检查变量是否为 dom 元素

jQuery - check if variable is dom element

javascript

dom