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()相比，1的结果为.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或class的简单确定，您可以检查目标字符串的第一个字符：

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>

检查选择器类型jquery

3 个答案: