Question

有没有办法检查给定变量是 not-empty 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的实例。您有很多选择可供选择。

＆＃13;

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

＆＃13;

<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>

＆＃13;

修改

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

修改

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

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: