jQueryオブジェクトからセレクターを取得する方法

112 
$("*").click(function(){
    $(this); // how can I get selector from $(this) ?
});

からセレクタ$(this)を取得する簡単な方法はありますか？セレクターで要素を選択する方法はありますが、要素からセレクターを取得するのはどうですか？

javascript  jquery  jquery-selectors  tree-traversal 
— フィディリップ
ソース
なぜこれが便利なのか知りたいですか？ここで（意味論的に）言っているのは、$（this）として参照されるすべての要素に対するものです...要素自体は$（this）なので、セレクターは必要ありません。あなたはオブジェクトを持っています...
— BenAlabaster
1
ネストされた要素を含むクリックが複数を返すことを理解していますか？身体のdivなど、私はこの時点で疲れすぎていますか？
— Mark Schultheiss
2
あなたが達成しようとしていることの「最終目標」を説明できれば、それは役に立ちます。あなたはその方法でより良い助けを得るかもしれません。
— jessegavin 2010年
3
要素は無数の異なる方法で選択できます。また、セレクター！==パス。この情報をどうするつもりですか？
— だます
2
これは、すでにJQuery要素が見つかり、プラグイン/モジュール/サブルーチンを使用していて、セレクターが機能する（おそらくコントロール外にある）必要がある場合に役立ちます。
— アンディ

回答:

57

わかりましたので、質問の上のコメントで質問者Fidilipは、彼/彼女が本当に何をしているのかは現在の要素へのパスを取得することであると言いました。

これは、DOMの祖先ツリーを「登り」、その後、かなり具体的なセレクターを構築するスクリプトです。 idかclassクリックされたアイテムの属性は。

jsFiddleで動作することを確認してください：http ://jsfiddle.net/Jkj2n/209/

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(function() {
        $("*").on("click", function(e) {
          e.preventDefault();
          var selector = $(this)
            .parents()
            .map(function() { return this.tagName; })
            .get()
            .reverse()
            .concat([this.nodeName])
            .join(">");

          var id = $(this).attr("id");
          if (id) { 
            selector += "#"+ id;
          }

          var classNames = $(this).attr("class");
          if (classNames) {
            selector += "." + $.trim(classNames).replace(/\s/gi, ".");
          }

          alert(selector);
      });
    });
    </script>
</head>
<body>
<h1><span>I love</span> jQuery</h1>
<div>
  <p>It's the <strong>BEST THING</strong> ever</p>
  <button id="myButton">Button test</button>
</div>
<ul>
  <li>Item one
    <ul>
      <li id="sub2" >Sub one</li>
      <li id="sub2" class="subitem otherclass">Sub two</li>
    </ul>
  </li>
</ul>
</body>
</html>

たとえば、下のHTMLで2番目のリストのネストされたリストアイテムをクリックすると、次の結果が得られます。

HTML>BODY>UL>LI>UL>LI#sub2.subitem.otherclass

— ジェセガビン
ソース
2
ありがとう！ジョインに1つの変更を加えてコードを使用します... join(" > ");は、直接の子を取得するため、より厳密なパスになります。
— nonsensickle 2014年
FANTASTIC ...これを私のクロム拡張に使用します。たった1つ、コロンに「：」を付けてidを使用することがありますが、これを「\\：」に置き換えることができます
— Savaratkar
@nonsensickleにお電話ください。私は自分の例を更新し、ifステートメントも削除しました。
— jessegavin 2015年
上記のコードフラグメントは、SVGオブジェクトのクラスを返しません。SVGで動作するjsFiddleは次のとおりです：http ://jsfiddle.net/mikemsq/vbykja4x/7/ 。
— mikemsq
32

::警告::
.selectorはバージョン1.7で廃止され、1.9で削除されました

jQueryオブジェクトには、昨日コードを掘り下げたときに見たセレクタープロパティがあります。それがドキュメントで定義されているかどうかはわかりません（将来の校正のため）。しかし、うまくいきます！

$('*').selector // returns *

編集：イベント内でセレクタを見つける場合、その情報は、要素ではなくイベント自体の一部であることが理想的です。要素には、さまざまなセレクタを通じて複数のクリックイベントが割り当てられる可能性があるためです。解決策はbind()、click()イベントを直接追加するのではなく、ラッパーを使用してイベントを追加することなどです。

jQuery.fn.addEvent = function(type, handler) {
    this.bind(type, {'selector': this.selector}, handler);
};

セレクターはという名前のオブジェクトのプロパティとして渡されますselector。にアクセスするevent.data.selector。

いくつかのマークアップで試してみましょう（http://jsfiddle.net/DFh7z/）：

<p class='info'>some text and <a>a link</a></p>​

$('p a').addEvent('click', function(event) {
    alert(event.data.selector); // p a
});

免責事項：live()イベントと同様に、DOMトラバーサルメソッドが使用されている場合、selectorプロパティは無効になる可能性があることに注意してください。

<div><a>a link</a></div>

以下のコードは機能しません。 liveは、この場合はa.parent()無効なセレクターであるセレクタープロパティに依存しているため。

$('a').parent().live(function() { alert('something'); });

私たちのaddEventメソッドは起動しますが、あなたも間違ったセレクターを見るでしょう- a.parent()。

— アヌラグ
ソース
これは、jquery =）から得られる最高のものだと思います。多分私は後で完全な解決策を見つけるでしょう。とにかく、これは本当に便利です、thx！=）
— Fidilip
@MarkoDumic：廃止されている必要があります。リンクは現在No Such jQuery Method Exists
— 無効で
12
@Levitikon 3年前の回答は現在廃止されているため、本当に反対票を投じていますか？あなたは確かに答えを編集して警告を出す必要があります
— A. Wolff
22

@drzausと協力して、次のjQueryプラグインを作成しました。

jQuery.getSelector

!(function ($, undefined) {
    /// adapted http://jsfiddle.net/drzaus/Hgjfh/5/

    var get_selector = function (element) {
        var pieces = [];

        for (; element && element.tagName !== undefined; element = element.parentNode) {
            if (element.className) {
                var classes = element.className.split(' ');
                for (var i in classes) {
                    if (classes.hasOwnProperty(i) && classes[i]) {
                        pieces.unshift(classes[i]);
                        pieces.unshift('.');
                    }
                }
            }
            if (element.id && !/\s/.test(element.id)) {
                pieces.unshift(element.id);
                pieces.unshift('#');
            }
            pieces.unshift(element.tagName);
            pieces.unshift(' > ');
        }

        return pieces.slice(1).join('');
    };

    $.fn.getSelector = function (only_one) {
        if (true === only_one) {
            return get_selector(this[0]);
        } else {
            return $.map(this, function (el) {
                return get_selector(el);
            });
        }
    };

})(window.jQuery);

縮小Javascript

// http://stackoverflow.com/questions/2420970/how-can-i-get-selector-from-jquery-object/15623322#15623322
!function(e,t){var n=function(e){var n=[];for(;e&&e.tagName!==t;e=e.parentNode){if(e.className){var r=e.className.split(" ");for(var i in r){if(r.hasOwnProperty(i)&&r[i]){n.unshift(r[i]);n.unshift(".")}}}if(e.id&&!/\s/.test(e.id)){n.unshift(e.id);n.unshift("#")}n.unshift(e.tagName);n.unshift(" > ")}return n.slice(1).join("")};e.fn.getSelector=function(t){if(true===t){return n(this[0])}else{return e.map(this,function(e){return n(e)})}}}(window.jQuery)

使用法と注意点

<html>
    <head>...</head>
    <body>
        <div id="sidebar">
            <ul>
                <li>
                    <a href="/" id="home">Home</a>
                </li>
            </ul>
        </div>
        <div id="main">
            <h1 id="title">Welcome</h1>
        </div>

        <script type="text/javascript">

            // Simple use case
            $('#main').getSelector();           // => 'HTML > BODY > DIV#main'

            // If there are multiple matches then an array will be returned
            $('body > div').getSelector();      // => ['HTML > BODY > DIV#main', 'HTML > BODY > DIV#sidebar']

            // Passing true to the method will cause it to return the selector for the first match
            $('body > div').getSelector(true);  // => 'HTML > BODY > DIV#main'

        </script>
    </body>
</html>

QUnitテスト付きのフィドル

http://jsfiddle.net/CALY5/5/

— 意志
ソース
私はあなたが行くところが好きだったので、いくつかの修正/変更を加えました：* jQueryプラグインはjQueryユーティリティを活用します$.map*オプションの区切り文字（奇妙な空のtagNamesを取り除く必要があります）* 安全のhasOwnPropertyためにforeachループをチェックインする必要はありませんか？
— drzaus 2013年
コメントをありがとう、私は今週末フィドルで適切なテストスイートをセットアップし、あなたの提案を組み込むことに取り組みます。
— ウィル
1
@drzaus質問を更新しました。' > '要素のセレクターを返さないデリミタがあるため、追加したカスタムデリミタは除外することにしました。
— ウィル
クールで素敵な作品。以前にqunitを見たことがない。区切り文字はプレゼンテーション用であると考えましたが、今ではリテラルセレクターパスの一部であることがわかりました。
— drzaus 2013
5

やってみましたか？ 

 $("*").click(function(){
    $(this).attr("id"); 
 });
— Abhilashv
ソース
3
*セレクターを使用しないようにしてください。非常に遅いです。
— Ben Carey
3
これは、要素のIDがそれほど大きくない場合にのみ機能します。
— グレン
2

私はjQueryプラグインをリリースしました：jQuery Selectorator、あなたはこのようなセレクターを手に入れることができます。

$("*").on("click", function(){
  alert($(this).getSelector().join("\n"));
  return false;
});
— ngs
ソース
これはクローン兄弟を扱う唯一のアプローチです、ありがとう！
— ブルーノペレス2017年
2

これを試して：

$("*").click(function(event){
    console.log($(event.handleObj.selector));
 });
— AmazingDayToday
ソース
2

この方法で$関数の上にレイヤーを追加するだけです：

$ = (function(jQ) { 
	return (function() { 
		var fnc = jQ.apply(this,arguments);
		fnc.selector = (arguments.length>0)?arguments[0]:null;
		return fnc; 
	});
})($);
スニペットを展開

今、あなたは次のようなことができます 

$（ "a"）。selector
新しいjQueryバージョンでも「a」を返します。

— アルバート・オルタ
ソース
これはまさに私が欲しかったことです。私がこれを探していた時間を考えると、それは疑わしいほどうまく機能します！アルバートありがとう。
— Mark Notton
1

http://www.selectorgadget.com/は、この使用例のために明示的に設計されたブックマークレットです。

とは言っても、CSSセレクターを自分で学習する必要があるという点で、他のほとんどの人と同じであり、コードを使用してCSSセレクターを生成しようとすると、持続可能ではありません。:)

— ポール・アイリッシュ
ソース
1

@jessegavinの修正にいくつかの修正を追加しました。

要素にIDがある場合、これはすぐに返されます。要素にID、クラス、または名前がない場合に備えて、名前属性チェックとn番目の子セレクターも追加しました。

ページに複数のフォームがあり、同様の入力がある場合、名前のスコープが必要になる場合がありますが、まだ処理していません。

function getSelector(el){
    var $el = $(el);

    var id = $el.attr("id");
    if (id) { //"should" only be one of these if theres an ID
        return "#"+ id;
    }

    var selector = $el.parents()
                .map(function() { return this.tagName; })
                .get().reverse().join(" ");

    if (selector) {
        selector += " "+ $el[0].nodeName;
    }

    var classNames = $el.attr("class");
    if (classNames) {
        selector += "." + $.trim(classNames).replace(/\s/gi, ".");
    }

    var name = $el.attr('name');
    if (name) {
        selector += "[name='" + name + "']";
    }
    if (!name){
        var index = $el.index();
        if (index) {
            index = index + 1;
            selector += ":nth-child(" + index + ")";
        }
    }
    return selector;
}
— ダスティン
ソース
1

上記の解決策の後でも複数の要素を取得していたため、より正確なdom要素のためにdds1024の作業を拡張しました。

例：DIV：nth-​​child（1）DIV：nth-​​child（3）DIV：nth-​​child（1）ARTICLE：nth-​​child（1）DIV：nth-​​child（1）DIV：nth-​​child（8）DIV ：nth-​​child（2）DIV：nth-​​child（1）DIV：nth-​​child（2）DIV：nth-​​child（1）H4：nth-​​child（2）

コード：

function getSelector(el)
{
    var $el = jQuery(el);

    var selector = $el.parents(":not(html,body)")
                .map(function() { 
                                    var i = jQuery(this).index(); 
                                    i_str = ''; 

                                    if (typeof i != 'undefined') 
                                    {
                                        i = i + 1;
                                        i_str += ":nth-child(" + i + ")";
                                    }

                                    return this.tagName + i_str; 
                                })
                .get().reverse().join(" ");

    if (selector) {
        selector += " "+ $el[0].nodeName;
    }

    var index = $el.index();
    if (typeof index != 'undefined')  {
        index = index + 1;
        selector += ":nth-child(" + index + ")";
    }

    return selector;
}
— アズガンヴィ
ソース
1

これにより、クリックされたHTML要素のセレクターパスを取得できます。

 $("*").on("click", function() {

    let selectorPath = $(this).parents().map(function () {return this.tagName;}).get().reverse().join("->");

    alert(selectorPath);

    return false;

});
— ヴィベク・クマール
ソース
1

さて、私はこの単純なjQueryプラグインを作成しました。

これにより、IDまたはクラス名がチェックされ、できるだけ正確なセレクターが提供されるようにします。

jQuery.fn.getSelector = function() {

    if ($(this).attr('id')) {
        return '#' + $(this).attr('id');
    }

    if ($(this).prop("tagName").toLowerCase() == 'body')    return 'body';

    var myOwn = $(this).attr('class');
    if (!myOwn) {
        myOwn = '>' + $(this).prop("tagName");
    } else {
        myOwn = '.' + myOwn.split(' ').join('.');
    }

    return $(this).parent().getSelector() + ' ' + myOwn;
}
— Codemole
ソース
0

クリックされた現在のタグの名前を取得しようとしていますか？

もしそうなら、これを行います。

$("*").click(function(){
    alert($(this)[0].nodeName);
});

あなたは本当に「セレクタ」を得ることができません、あなたの場合の「セレクタ」は*です。

— ジェセガビン
ソース
タグ名は必要ありません。クリックした要素へのパスだけが必要です。
— Fidilip
1
AH、「要素へのパス」が「セレクター」とはかなり異なるところから取得を開始します。要素とそのすべての親ノード名が必要ですか？
— Mark Schultheiss
私はあなたの実際の目標により近づく別の答えを投稿しました。より具体的になるように質問を編集する必要があります。
— jessegavin
0

必要に応じて、必要に応じてJavascriptコードを使用します。これは、上記で選択した回答のみの翻訳です。

    <script type="text/javascript">

function getAllParents(element){
    var a = element;
    var els = [];
    while (a && a.nodeName != "#document") {
        els.unshift(a.nodeName);
        a = a.parentNode;
    }
    return els.join(" ");
}

function getJquerySelector(element){

    var selector = getAllParents(element);
    /* if(selector){
        selector += " " + element.nodeName;
    } */
    var id = element.getAttribute("id");
    if(id){
        selector += "#" + id;
    }
    var classNames = element.getAttribute("class");
    if(classNames){
        selector += "." + classNames.replace(/^\s+|\s+$/g, '').replace(/\s/gi, ".");
    }
    console.log(selector);
    alert(selector);
    return selector;
}
</script>
— ジャイプスター
ソース
0

ここで読んだいくつかの回答を考慮に入れて、私はこれを提案したいと思います：

function getSelectorFromElement($el) {
  if (!$el || !$el.length) {
    return ;
  }

  function _getChildSelector(index) {
    if (typeof index === 'undefined') {
      return '';
    }

    index = index + 1;
    return ':nth-child(' + index + ')';
  }

  function _getIdAndClassNames($el) {
    var selector = '';

    // attach id if exists
    var elId = $el.attr('id');
    if(elId){
      selector += '#' + elId;
    }

    // attach class names if exists
    var classNames = $el.attr('class');
    if(classNames){
      selector += '.' + classNames.replace(/^\s+|\s+$/g, '').replace(/\s/gi, '.');
    }

    return selector;
  }

  // get all parents siblings index and element's tag name,
  // except html and body elements
  var selector = $el.parents(':not(html,body)')
    .map(function() {
      var parentIndex = $(this).index();

      return this.tagName + _getChildSelector(parentIndex);
    })
    .get()
    .reverse()
    .join(' ');

  if (selector) {
    // get node name from the element itself
    selector += ' ' + $el[0].nodeName +
      // get child selector from element ifself
      _getChildSelector($el.index());
  }

  selector += _getIdAndClassNames($el);

  return selector;
}

jQueryプラグインを作成するのに役立つでしょうか？

— p1nox
ソース
0

p1noxありがとうございます！

私の問題は、フォームの一部を変更するajax呼び出しに焦点を戻すことでした。

$.ajax({  url : "ajax_invite_load.php",
        async : true,
         type : 'POST',
         data : ...
     dataType : 'html',
      success : function(html, statut) {
                    var focus = $(document.activeElement).getSelector();
                    $td_left.html(html);
                    $(focus).focus();
                }
});

私はあなたの関数をjQueryプラグインにカプセル化する必要がありました：

    !(function ($, undefined) {

    $.fn.getSelector = function () {
      if (!this || !this.length) {
        return ;
      }

      function _getChildSelector(index) {
        if (typeof index === 'undefined') {
          return '';
        }

        index = index + 1;
        return ':nth-child(' + index + ')';
      }

      function _getIdAndClassNames($el) {
        var selector = '';

        // attach id if exists
        var elId = $el.attr('id');
        if(elId){
          selector += '#' + elId;
        }

        // attach class names if exists
        var classNames = $el.attr('class');
        if(classNames){
          selector += '.' + classNames.replace(/^\s+|\s+$/g, '').replace(/\s/gi, '.');
        }

        return selector;
      }

      // get all parents siblings index and element's tag name,
      // except html and body elements
      var selector = this.parents(':not(html,body)')
        .map(function() {
          var parentIndex = $(this).index();

          return this.tagName + _getChildSelector(parentIndex);
        })
        .get()
        .reverse()
        .join(' ');

      if (selector) {
        // get node name from the element itself
        selector += ' ' + this[0].nodeName +
          // get child selector from element ifself
          _getChildSelector(this.index());
      }

      selector += _getIdAndClassNames(this);

      return selector;
    }

})(window.jQuery);
— パトリック
ソース
-3

どうですか：

var selector = "*"
$(selector).click(function() {
    alert(selector);
});

jQueryが使用されたセレクターテキストを格納するとは思わない。結局のところ、次のようなことをしたらどうなるでしょう。

$("div").find("a").click(function() {
    // what would expect the 'selector' to be here?
});
— ディーン・ハーディング
ソース
jQueryのは、内部セレクタが構築し$('div').find('a').selectorています div a。イベントがjQuery関数ではなくラッパーで作成された場合、セレクターをデータ引数としてイベントハンドラーに渡すことができると思います。
— Anurag
1
これは本当に深刻な答えですか？
— Glen
-5

最良の答えは

var selector = '#something';

$(selector).anything(function(){
  console.log(selector);
});
— アニー
ソース
4
これは最善の答えとはまったく思えません。
— アレックス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.