自作のJQueryで指定したセレクタのみを取得したい

JQueryで自作のプラグインの作成を練習していいるのですが、
指定しているセレクタを取得したいのですがわかりません。
指定したセレクタのみを取得して、他にクラスがついていたらそのクラスごとに別処理をしたいと考えています。

HTML

<input class="group1 type-a alphabet" type="text">
<input class="group1 type-b alpha-num" type="text">
<input class="group1 type-c kana" type="text">
<input class="group1 type-d long-text" type="text">

JQuery

$(document).ready(function(){
  //プラグイン実行
  $('.group1').pluginName();
});

JQueryプラグイン

(function( $ ) {
  $.fn.pluginName = function() {


  // classNameで「group1 type-a alphabet」や「group1 type-b alpha-num」といったふうに全クラスは取得できるのですが、
  // そうではなくて、指定した.group1をいうセレクタのみ取得したいです。

  var class = ○○; //.group1を取得したい

  //指定したセレクタ以外のクラスで処理が分岐
  $('.'+class+'.type-a').xxxx
  $('.'+class+'.type-b').xxxx
  …
  };
})( jQuery );

_jun_

2019/01/03 09:26

.group1というクラス名が付与された要素(element)のみ取得したいという意味でしょうか。一般的にjQueryのセレクタとは、".group1"などの文字列を指します。

k_o_m_e

2019/01/04 01:41

その文字列をあえて取得したかったのです

行動規範の内容に同意します

回答1件

ベストアンサー

$.fn.pluginName()を定義した場合、pluginName()内のthisは、プラグインを適用したjQueryオブジェクトです。

例えば、プラグインを適用したjQueryオブジェクトを、console.log()で表示するだけのプラグインを考えるとわかりやすいです。

JavaScript
1$.fn.consoleThis = function() {
2  console.log(this)
3};
4
5$(function() {
6  var $group1 = $('.group1');
7
8  console.log($group1) // $group1のjQueryオブジェクト
9
10  $group1.consoleThis(); // 上記と同じものが表示される
11});

k_o_m_eさんの場合、プラグインを適用したjQueryオブジェクトに含まれる要素が持つクラスに基づいて条件分岐したいとのことなので、以下のようにできます。

JavaScript
1(function( $ ) {
2  $.fn.pluginName = function() {
3    if (this.hasClass('aaa')) {
4      // 処理...
5    }
6
7    if (this.hasClass('bbb')) {
8      // 処理...
9    }
10  }
11})( jQuery );
12

補足(1)
プラグインが特定の値を返すものでない場合、他のメソッドをチェーンできるように、jQueryオブジェクトをreturnするようにしておくのが一般的です。

JavaScript
1(function( $ ) {
2  $.fn.pluginName = function() {
3    if (this.hasClass('aaa')) {
4      // 処理...
5    }
6
7    if (this.hasClass('bbb')) {
8      // 処理...
9    }
10
11    return this // `this`を`return`すれば、メソッドチェーンが使えます。
12  }
13})( jQuery );
14
15$(function () {
16  $('.group1')
17    .pluginName() // $('.group1')の結果が`return`されるので、そのまま他のメソッドを呼べる
18    .otherPlugin();
19});