找出函数中使用的 jQuery 选择器

Question

使用jQuery，如何在函数中轻松找出（此处myFct）使用什么选择器获取元素（此处 .foo 或 .bar)?

$.fn.myFct = function(){
 //print '.foo' OR '.bar'
}


$('.foo').myFct();
$('.bar').myFct();

更新：有时使用 #thisisanid、有时 .thisisaclass 甚至 div p span

调用元素

Answer 1

在函数内部，this 保存元素本身或元素数组（如果被多次调用）。

因此，您可以使用内置的 className 属性来确定在函数内部调用了哪个元素。

$.fn.myFct = function() {
  // Called on multiple elements
  if (this.length) {
    $(this).each(function() {
      console.log(this.className);
    });  
  } 
  // Called on a single element
  else {
    console.log(this.className);
  }
}

$('.foo').myFct();       // foo
$('.bar').myFct();       // bar
$('.foo, .bar').myFct(); // foo & bar

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo"></div>
<div class="bar"></div>

Answer 2

您可以使用较低 jQuery 版本（例如 1.12.4）的代码，通过 .selector

Demo 轻松实现您想要的效果:

$(document).ready(function(){

$.fn.myFct = function() {
    console.log($(this).selector);
}


$('.foo').myFct();
$('#bar').myFct();
$('div p span').myFct();
});

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

<div class="foo"></div>
<div id="bar"></div>
<div><p><span></span></p></div>

找出函数中使用的 jQuery 选择器

Find out jQuery selector used in the function

jquery

jquery-selectors