jQuery - kiểm tra xem biến có phải là phần tử dom

Question

Có cách nào để kiểm tra xem biến đã cho là không rỗng đối tượng jQuery hoặc phần tử DOM gốc không?

nên nó sẽ như thế nào

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

Bạn có thể sử dụng instanceof để kiểm tra xem các đối tượng thông qua tại là một instanceof jQuery hoặc một instanceof HTMLElement. Nếu nó là return true;. Nếu không, 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;   
     } 
} 

Tùy chọn, thay vì trả lại true hoặc false, quý vị có thể làm một số hành động khác. Bạn cũng có thể tách từng tùy chọn ra và thực hiện một hành động riêng biệt tùy thuộc vào đối tượng nào là đối tượng của jQuery hoặc HTMLElement. Bạn có rất nhiều lựa chọn để lựa chọn.

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

EDIT:

@RickHitchcock làm một điểm rất có giá trị liên quan đến chức năng trở về một thể hiện của jQuery không có các yếu tố phù hợp. Vì lý do này, tôi đã cập nhật hàm để đưa vào tài khoản không chỉ khi đối tượng là một thể hiện của jQuery mà còn nếu đối tượng có độ dài, cho biết có tìm thấy phần tử DOM hay không.

EDIT:

An sửa thêm được thực hiện mỗi bình luận @AdamPietrasiak 's dưới đây trường hợp liên quan đến các HTMLCollections trở sai. Trong trường hợp này, nếu obj được truyền vào là một phiên bản của HTMLCollection, mỗi phần tử được chuyển đến hàm nội bộ checkInstance. Bất kỳ phần tử nào không phải là nút DOM sẽ kích hoạt chức năng để ném tổng thể false bất kể có yếu tố trong danh sách hay không (tức là đối với các trường hợp HTMLCollection chức năng coi đó là tất cả hoặc không có gì).

Answer 2

tôi nghĩ này bao gồm tất cả các trường hợp:

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>