检查选择器类型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>