檢查選擇器類型jquery

Question

我想創建一個jQuery擴展，它有一個傳遞目標值的選項。

這裏是擴展

//passed value : #target-element-id 
$("<selector>").myFunction({ target: "#target-element-id" }); 
//target should return an "ID" selector type. 

的樣本用法是能夠確認，如果傳遞的值是一個ID，類選擇或是否有可能檢查使用什麼類型的選擇？

對於那些詢問爲什麼我需要檢查選擇器類型。

這是因爲我想這樣做..

if (isId) { 
    goDance(); 
} 
else if (isClass) { 
    goSing(); 
} 

Answer 1

您可以使用String.prototype.split()與RegExp/\s+/然後.pop()在options.target檢索選擇器字符串的每個部分;合格.pop()結果jQuery()，調用.prop()與參數"id"檢查相比Array.prototype.slice()上的.pop()結果參數1全等檢查id，否則選擇是className

function goDance(id) { 
 
    console.log("goDance id:", id) 
 
} 
 

 
function goSing(c) { 
 
    console.log("goSing class:", c) 
 
} 
 

 
(function($) { 
 
    $.fn.myFunction = function(options) { 
 
    var type = options.target.split(/\s+|>/).pop(); 
 
    if ($(type).prop("id") === type.slice(1)) { 
 
     goDance(type); 
 
    } else { 
 
     goSing(type); 
 
    } 
 
    } 
 
}(jQuery)); 
 

 
$("#div").myFunction({target:"#targetId>.targetClass1"}); // `goSing` 
 
$("#div").myFunction({target:"body #targetId"}); // `goDance`

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div id="div"></div> 
 
<div class="targetClass">target class</div> 
 
<div id="targetId">target id<span class="targetClass1">target class 1</span></div>

Answer 2

對於一個簡單的判定ID的或一類，你可以檢查目標字符串的第一個字符：

var selectorType; 
var targetFirstCharacter = options.target.charAt(0); 

switch (targetFirstCharacter) { 
    case "#": 
     selectorType = "id"; 
     break; 
    case ".": 
     selectorType = "class"; 
     break; 
    case "[": 
     selectorType = "attribute"; 
     break; 
    default: 
     if (targetFirstCharacter.match(/[a-z]/i)) { 
      selectorType = "tag"; 
     } 
} 

Answer 3

<canvas id="canvas" width="100" height="100"></canvas> 
<input id="file" type='file' onchange="" /> 
<div class="oi"></div> 
<p>para</p> 
<div id="content" class="hello"> 
    <p class="st"></p> 
</div> 
<script> 
    $("document").ready(function(){ 
     function detect(selector){ 
      console.log("-------------"); 
      console.log("selector",selector); 
      var type = "undefined"; 
      var allParts = []; 
      var parts = selector.split(" "); 
      var lastPart = parts[parts.length-1]; 
      var parray = lastPart.split(/(#|\.)/); 
      var strToTest = parray[parray.length-1]; 
      console.log("strToTest",strToTest); 
      //try to find something 
      if($(selector).size() > 0){ 
       //is class 
       if($(selector).hasClass(strToTest)){ 
        type = "class selector"; 
       } 
       else if($(selector).attr("id") == strToTest){ 
        type = "id selector"; 
       }else{ 
        if($(selector).is(strToTest)){ 
         type = "element selector"; 
        }else{ 
         //undefined 
        } 
       } 
      } 
      //console.log(type); 
      return type; 
     } 
     console.log(detect(".oi")); 
     console.log(detect("#file")); 
     console.log(detect("p")); 
     console.log(detect("canvas#canvas")); 
     console.log(detect("div#content.hello")); 
     console.log(detect("div#content .st")); 
     console.log(detect("div#content p.st")); 

    }); 
</script>