javascript - 检查选择器类型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() on options.target 检索选择器字符串的每个部分；将 .pop() 的结果传递给 jQuery()，使用参数 "id" 调用 .prop()检查与 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>