मैं jQuery का उपयोग कर तत्व की आईडी कैसे प्राप्त कर सकता हूं?




jquery-selectors (12)

<div id="test"></div>
<script>
  $(document).ready(function() {
    alert($('#test').id);
  });  
</script>

उपरोक्त काम क्यों नहीं करता है, और मुझे यह कैसे करना चाहिए?


JQuery रास्ता:

$('#test').attr('id')

आपके उदाहरण में:

<div id="test"></div>

$(document).ready(function() {
    alert($('#test').attr('id'));
}); 

या डोम के माध्यम से:

$('#test').get(0).id;

या और भी :

$('#test')[0].id;

और $('#test').get(0) उपयोग के पीछे कारण $('#test').get(0) JQuery में $('#test').get(0) या यहां तक ​​कि $('#test')[0] यह है कि $('#test') एक JQuery चयनकर्ता है और एक सरणी देता है () नतीजे इसकी डिफ़ॉल्ट कार्यक्षमता से एक तत्व नहीं है

jquery में डोम चयनकर्ता के लिए एक विकल्प है

$('#test').prop('id')

जो .attr() और $('#test').prop('foo') निर्दिष्ट DOM foo प्रॉपर्टी को पकड़ता है, जबकि $('#test').attr('foo') निर्दिष्ट HTML foo पकड़ता है विशेषता और आप here मतभेदों के बारे में अधिक जानकारी प्राप्त कर सकते हैं।


अंत में यह आपकी समस्याओं का समाधान करेगा:

मान लें कि आपके पास एक पृष्ठ पर कई बटन हैं और आप उनमें से एक को अपने आईडी के आधार पर jQuery अजाक्स (या AJAX नहीं) के साथ बदलना चाहते हैं।

आइए यह भी कहें कि आपके पास कई अलग-अलग प्रकार के बटन हैं (फॉर्म के लिए, अनुमोदन के लिए और समान उद्देश्यों के लिए), और आप चाहते हैं कि jQuery केवल "जैसे" बटनों का इलाज करे।

यहां एक कोड है जो काम कर रहा है: jQuery केवल क्लास .cls-hlpb के बटनों का इलाज करेगा, यह उस बटन की आईडी ले जाएगा जो क्लिक किया गया था और AJAX से आने वाले डेटा के अनुसार इसे बदल देगा।

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
<script>
$(document).ready(function(){
$(".clshlpbtn").on('click',function(e){
var id = $(e.target).attr('id');
 alert("The id of the button that was clicked: "+id);
$.post("demo_test_post.asp",
    {
      name: "Donald Duck",
      city: "Duckburg"
    },
    function(data,status){

    //parsing the data should come here:
    //var obj = jQuery.parseJSON(data);
    //$("#"+id).val(obj.name);
    //etc.

    if (id=="btnhlp-1")
       $("#"+id).attr("style","color:red");
    $("#"+id).val(data);
    });
});




});
</script>
</head>
<body>

<input type="button" class="clshlpbtn" id="btnhlp-1" value="first btn">    </input>
<br />
<input type="button" class="clshlpbtn" id="btnhlp-2" value="second btn">    </input>
<br />
<input type="button" class="clshlpbtn" id="btnhlp-9" value="ninth btn">    </input>

</body>
</html>

कोड w3schools से लिया गया था और बदल दिया।


खैर, ऐसा लगता है कि कोई समाधान नहीं हुआ है और मैं अपने स्वयं के समाधान का प्रस्ताव देना चाहता हूं जो JQuery प्रोटोटाइप का विस्तार है। मैंने इसे एक हेल्पर फ़ाइल में रखा है जो JQuery लाइब्रेरी के बाद लोड किया गया है, इसलिए window.jQuery लिए चेक

if (window.jQuery) {
    $.prototype.id = function () {
        if (this.length > 1) {
            var val = [];
            this.each(function (idx, el) {
                val.push($(el).id());
            });
            return val;
        } else {
            return this.attr('id');
        }
    }
}

यह सही नहीं हो सकता है लेकिन यह JQuery लाइब्रेरी में शामिल होने की शुरुआत है।

या तो एक स्ट्रिंग मान या स्ट्रिंग मानों का ऐरे देता है। स्ट्रिंग मानों का ऐरे, घटना के लिए एक बहु-तत्व चयनकर्ता का उपयोग किया गया था।


चूंकि आईडी एक विशेषता है इसलिए आप इसे एटीआर विधि का उपयोग कर प्राप्त कर सकते हैं


यदि आप किसी तत्व का आईडी प्राप्त करना चाहते हैं, तो क्लास चयनकर्ता द्वारा कहें, जब कोई ईवेंट (इस मामले में क्लिक ईवेंट) उस विशिष्ट तत्व पर निकाल दिया गया था, तो निम्न कार्य करेगा:

 $('.your-selector').click(function(){
       var id = $(this).attr('id');
 });

यह एक पुराना सवाल है, लेकिन 2015 तक यह वास्तव में काम कर सकता है:

$('#test').id;

और आप असाइनमेंट भी कर सकते हैं:

$('#test').id = "abc";

जब तक आप निम्नलिखित JQuery प्लगइन को परिभाषित करते हैं:

Object.defineProperty($.fn, 'id', {
    get: function () { return this.attr("id"); },
    set: function (newValue) { this.attr("id", newValue); }
});

दिलचस्प बात यह है कि यदि element एक डोम तत्व है, तो:

element.id === $(element).id; // Is true!

शायद उन लोगों के लिए उपयोगी जो इस धागे को पाते हैं। नीचे दिया गया कोड केवल तभी काम करेगा यदि आप पहले से ही jQuery का उपयोग करते हैं। समारोह हमेशा एक पहचानकर्ता देता है। यदि तत्व में पहचानकर्ता नहीं है तो फ़ंक्शन पहचानकर्ता उत्पन्न करता है और इसे तत्व में जोड़ता है।

var generatedIdCounter = 0;

$.fn.id = function() {
    var identifier = this.attr('id');

    if(!identifier) {
        generatedIdCounter++;
        identifier = 'isGenerated_' + generatedIdCounter;

        this.attr('id', identifier);
    }

    return identifier;
}

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

$('.classname').id();

$('#elementId').id();

$('#test').attr('id') आपके उदाहरण में:

<div id="test"></div>

$(document).ready(function() {
    alert($('#test').attr('id'));
}); 

$('selector').attr('id') पहले मिलान किए गए तत्व की आईडी वापस कर देगा। Reference

यदि आपके मिलान किए गए सेट में एक से अधिक तत्व होते हैं, तो आप प्रत्येक .each युक्त सरणी को वापस करने के लिए पारंपरिक। .each iterator का उपयोग कर सकते हैं:

var retval = []
$('selector').each(function(){
  retval.push($(this).attr('id'))
})
return retval

या, यदि आप थोड़ा ग्रिटियर पाने के इच्छुक हैं, तो आप रैपर से बच सकते हैं और .map shortcut उपयोग कर सकते हैं।

return $('.selector').map(function(index,dom){return dom.id})

.id मान्य jquery फ़ंक्शन नहीं है। किसी तत्व के गुणों तक पहुंचने के लिए आपको .attr() फ़ंक्शन का उपयोग करने की आवश्यकता है। आप दो पैरामीटर निर्दिष्ट करके एक विशेषता मान को बदलने के लिए .attr() का उपयोग कर सकते हैं, या एक निर्दिष्ट करके मूल्य प्राप्त कर सकते हैं।

Reference


$('tagname').attr('id');

उपरोक्त कोड का उपयोग करके आप आईडी प्राप्त कर सकते हैं।


$.fn.extend({
    id : function() {
        return this.attr('id');
    }
});

alert( $('#element').id() );

कुछ जांच कोड निश्चित रूप से आवश्यक है, लेकिन आसानी से लागू!





jquery-selectors