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

【问题标题】：Find out jQuery selector used in the function找出函数中使用的 jQuery 选择器
【发布时间】：2018-08-18 15:03:43
【问题描述】：

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

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


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

更新：有时使用#thisisanid 调用元素，有时使用.thisisaclass 甚至div p span

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

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

演示：

$(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>

【讨论】：

【解决方案2】：

在函数内部，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>

【讨论】：

它完全回答了这个问题。现在想象一下，有时使用#thisisanid，有时使用.thisisaclass，甚至是'div p span'来调用元素。