मैं jQuery ऑब्जेक्ट से चयनकर्ता कैसे प्राप्त कर सकता हूं


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

क्या चयनकर्ता प्राप्त$(this) करने का एक आसान तरीका है ? इसके चयनकर्ता द्वारा एक तत्व का चयन करने का एक तरीका है, लेकिन तत्व से चयनकर्ता प्राप्त करने के बारे में क्या है ?


बस उत्सुक क्यों यह उपयोगी होगा? आप यहाँ क्या कह रहे हैं (शब्दार्थ) प्रत्येक तत्व के लिए संदर्भित है जो $ (यह) है ... तत्व स्वयं $ है (यह) इस प्रकार चयनकर्ता की आवश्यकता नहीं है। आपको वस्तु मिल गई है ...
बेनालास्टर

1
आपको पता है कि नेस्टेड तत्वों के साथ क्लिक एक से अधिक वापस आ जाएगा? शरीर में div, आदि या मैं भी इस मोड़ पर थक गया हूँ?
मार्क शुल्त्स

2
यदि आप जिस कार्य को पूरा करने का प्रयास कर रहे हैं, उसके अंतिम लक्ष्य का वर्णन कर सकते हैं तो यह मददगार होगा। आपको इस तरह से बेहतर मदद मिल सकती है।
जेस्सेग्विन

3
एक तत्व को विभिन्न तरीकों से असंख्य में चुना जा सकता है। इसके अलावा, चयनकर्ता! == पथ। इस जानकारी से आपको क्या करने की उम्मीद है?
deceze

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
धन्यवाद! मैं शामिल होने पर एक संशोधन के साथ आपके कोड का उपयोग करूंगा ... join(" > ");, मुझे तत्काल बच्चे मिल जाएंगे और इसलिए एक अधिक सख्त पथ।
बकवास

काल्पनिक ... मैं इसे अपने क्रोम एक्सटेंशन के लिए उपयोग करने वाला हूं। बस एक चीज, कभी-कभी आईडी को कोलन के साथ प्रयोग किया जाता है: 'उपसर्ग, जिसे हम' \\ 'से बदल सकते हैं
सावरकर

अच्छी कॉल @nonsensickle। मैंने अपना उदाहरण अपडेट किया, और एक स्टेटमेंट भी निकाला।
जेसेग्विन

ऊपर दिए गए कोड का टुकड़ा एसवीजी वस्तुओं के लिए कक्षाएं नहीं लौटाता है। यहाँ एक jsField है जो SVG के लिए काम करता है: http://jsfiddle.net/mikemsq/vbykja4b/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 ट्रैवर्सल विधियों का उपयोग किया जाता है।

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

नीचे दिया गया कोड काम नहीं करेगा, क्योंकि liveचयनकर्ता संपत्ति पर निर्भर करता है जो इस मामले में है a.parent()- एक अवैध चयनकर्ता।

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

हमारी addEventपद्धति में आग लग जाएगी, लेकिन आप भी गलत चयनकर्ता को देखेंगे - a.parent()


मुझे लगता है कि यह सबसे अच्छा है जिसे हम jquery =) से प्राप्त करते हैं। शायद मुझे बाद में पूरा समाधान मिल जाएगा। वैसे भी यह वास्तव में आसान हो सकता है, thx! =)
फ़िडिलिप

@ मार्कोड्यूमिक: पदावनत कर दिया गया है। यह लिंक अब मृत हो गया है और इसका अनुसरण केवल हमें बताता है:No Such jQuery Method Exists
हिप्पिट्रैयल

12
@Levitikon क्या आप वास्तव में तीन साल पुराने एक उत्तर को अस्वीकार कर रहे हैं क्योंकि अब यह पदावनत है ?! आपको वास्तव में उत्तर को संपादित करना चाहिए और चेतावनी देना चाहिए
ए। वोल्फ

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);

न्यूनतम जावास्क्रिप्ट

// 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>

फिडल डब्ल्यू / क्विंट टेस्ट

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


मुझे पसंद है कि आप कहाँ जा रहे थे, इसलिए मैंने कुछ सुधार / परिवर्तन किए : * jQuery प्लगइन jQuery उपयोगिता का लाभ उठाता है $.map* वैकल्पिक सीमांकक (अजीब खाली टैगनाम को पट्टी करने की आवश्यकता है) * क्या आपको सुरक्षित होने के लिए लूप hasOwnPropertyमें जांचने की आवश्यकता नहीं है foreach?
ड्रेज़ॉस

टिप्पणियों के लिए धन्यवाद, मैं इस सप्ताह के अंत में एक बेला में उचित परीक्षण सूट स्थापित करूंगा और आपके सुझावों को शामिल करने पर काम करूंगा।
विल

1
@drzaus मैंने सवाल अपडेट किया है। मैंने आपके द्वारा जोड़े गए कस्टम सीमांकक को छोड़ने का फैसला किया क्योंकि ' > 'तत्व के चयनकर्ता को वापस नहीं करने का कारण होगा।
विल

शांत, अच्छा काम; इससे पहले qunit नहीं देखा था। मुझे लगा कि परिसीमन सिर्फ प्रस्तुति के लिए हुआ है, लेकिन अब मुझे लगता है कि यह शाब्दिक चयनकर्ता पथ का हिस्सा है।
drzaus

5

क्या आपने यह कोशिश की?

 $("*").click(function(){
    $(this).attr("id"); 
 });

3
*चयनकर्ता का उपयोग न करने की कोशिश करें , यह बहुत धीमा है!
बेन केरी

3
यह केवल तभी काम करता है जब तत्व में एक आईडी हो ताकि वह महान न हो।
ग्लेन

2

मैंने jQuery प्लगइन जारी किया है: jQuery चयनकर्ता , आप इस तरह चयनकर्ता प्राप्त कर सकते हैं।

$("*").on("click", function(){
  alert($(this).getSelector().join("\n"));
  return false;
});

यह एकमात्र तरीका है जो क्लोन किए गए भाई-बहनों के साथ व्यवहार करता है, धन्यवाद!
ब्रूनो पेरेज

2

इसे इस्तेमाल करे:

$("*").click(function(event){
    console.log($(event.handleObj.selector));
 });

2

इस तरह $ फंक्शन पर एक परत जोड़ें:

$ = (function(jQ) { 
	return (function() { 
		var fnc = jQ.apply(this,arguments);
		fnc.selector = (arguments.length>0)?arguments[0]:null;
		return fnc; 
	});
})($);

अब आप जैसे चाहे कर सकते हैं

$ ( "एक")। चयनकर्ता
और नए jQuery के संस्करणों पर भी "a" लौटाएगा।


यह वही है जो मैं चाहता था। यह संदेहास्पद रूप से अच्छी तरह से काम करता है कि मैंने कब तक इसके लिए देखा है! धन्यवाद अल्बर्ट।
मार्क नटन

1

http://www.selectorgadget.com/ इस उपयोग के मामले के लिए स्पष्ट रूप से डिज़ाइन किया गया एक बुकमार्कलेट है।

उस ने कहा, मैं ज्यादातर अन्य लोगों से सहमत हूं कि आपको बस सीएसएस चयनकर्ताओं को खुद सीखना चाहिए, कोड के साथ उन्हें उत्पन्न करने की कोशिश करना टिकाऊ नहीं है। :)


1

मैंने @ jessegavin के फिक्स में कुछ सुधार जोड़े।

यदि तत्व पर कोई आईडी है तो यह तुरंत वापस आ जाएगी। मैंने एक नाम विशेषता जांच और एक nth-child चयनकर्ता को भी जोड़ा है यदि किसी तत्व में कोई id, वर्ग या नाम नहीं है।

यदि पृष्ठ पर एक से अधिक रूप हैं और समान इनपुट हैं, तो नाम को स्कूपिंग की आवश्यकता हो सकती है, लेकिन मैंने अभी तक इसे नहीं संभाला है।

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

उपरोक्त समाधानों के बाद भी मुझे कई तत्व मिल रहे थे, इसलिए मैंने 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 प्लगइन लिखा है।

यह आईडी या वर्ग के नाम की जाँच करता है, और यथासंभव सटीक चयनकर्ता देने का प्रयास करता है।

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;
}

0

क्या आप उस मौजूदा टैग का नाम लेने का प्रयास कर रहे हैं जिसे क्लिक किया गया था?

यदि हां, तो ऐसा करें ..

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

आपको वास्तव में "चयनकर्ता" नहीं मिल सकता है, आपके मामले में "चयनकर्ता" है *


मुझे टैग नाम की आवश्यकता नहीं है। मेरे द्वारा क्लिक किए गए तत्व के लिए मुझे केवल पथ की आवश्यकता है
फ़िडिलिप

1
एएच, "तत्व को पथ" प्राप्त करना शुरू करना "चयनकर्ता" की तुलना में बहुत अलग है। तो आपको तत्व की आवश्यकता है, और उसके सभी अभिभावकों के नाम?
मार्क शुल्त्स

मैंने एक और उत्तर पोस्ट किया है जो आपके वास्तविक लक्ष्य की ओर अधिक जाता है। आपको प्रश्न को संपादित करना चाहिए ताकि यह अधिक विशिष्ट हो।
१०:११ पर जेसेगैविन

0

जैसा कि मुझे इसकी आवश्यकता थी, उसी के लिए जावास्क्रिप्ट कोड। यह केवल उपरोक्त चयनित उत्तर का अनुवाद है।

    <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 प्लगइन बनाने के लिए उपयोगी है?


0

धन्यवाद p1nox!

मेरी समस्या यह थी कि फॉर्म के हिस्से को संशोधित करने वाले एक अजाक्स कॉल पर वापस ध्यान केंद्रित करना था।

$.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);

-1

यह आपको DOM पथ नहीं दिखाएगा, लेकिन जब आप किसी ऑब्जेक्ट को देखते हैं, तो यह क्रोम डिबगर में आपके द्वारा देखे जाने वाले स्ट्रिंग प्रतिनिधित्व का उत्पादन करेगा।

$('.mybtn').click( function(event){
    console.log("%s", this);    // output: "button.mybtn"
});

https://developer.chrome.com/devtools/docs/console-api#consolelogobject-object


-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 फ़ंक्शंस के माध्यम से नहीं बनाए जाते हैं, लेकिन इसके बजाय एक आवरण, मेरा मानना ​​है कि चयनकर्ता को इवेंट हैंडलर के डेटा तर्क के रूप में पारित किया जा सकता है।
अनुराग

1
क्या यह वास्तव में एक गंभीर जवाब है?
ग्लेन

-5

सबसे अच्छा जवाब होगा

var selector = '#something';

$(selector).anything(function(){
  console.log(selector);
});

4
यह सब पर सबसे अच्छा जवाब की तरह नहीं लगता है।
एलेक्स
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.