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

Question

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

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

Comments

एक तत्व की आईडी प्राप्त करना जो उसकी आईडी के माध्यम से चुना गया है? ऊ

— मार्टिन श्नाइडर

नमूना कोड। मैं एक ईवेंट ट्रिगर पर काम कर रहा हूं जो "इस" का उपयोग करता है और मुझे यह जानने की आवश्यकता है कि ईवेंट को किसने ट्रिगर किया है, और स्वतंत्र रूप से ट्रैक किया है कि प्रत्येक तत्व कितनी बार ट्रिगर होता है। "यह" के साथ एक नमूना का निर्माण बहुत बड़ा होगा।

— नेल्सन

Answer 1

JQuery तरीका:

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test"></div>

या DOM के माध्यम से:

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

या और भी :

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

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

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

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

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

Comments

यह मुझे हर बार है कि jQuery इस तरह के लिए एक शॉर्टकट नहीं है $('#test').id()।

— विस्मयकारी

यह शायद ही कभी उपयोगी होगा क्योंकि आईडी आमतौर पर HTML और JS में हार्ड-कोडेड होते हैं। जब आप जेएस लिखते हैं, तो आप पहले से ही किसी तत्व की आईडी को जानते हैं, इसलिए आप उस आईडी को तत्व को पुनः प्राप्त करने के लिए लिखते हैं। आपको शायद ही कभी प्रोग्राम के तत्व की आईडी प्राप्त करने की आवश्यकता है।

— daniel1426

उस 164969 बार बनाओ। साथ ही अब मैं यहां हूं। मेरे पास कोड है जो फॉर्म को इनिशियलाइज़ करता है। कुछ रूपों में विशेष आवश्यकताएं हैं। मैं विशिष्ट फार्म तत्वों की तलाश कर सकता हूं कि क्या करना है, लेकिन मुझे लगता है कि फॉर्म की पहचान - इस प्रकार फॉर्म की आईडी - सबसे तार्किक और निश्चित तरीका है।

— स्लैशबैक

मुझे एक तत्व आईडी प्राप्त करने की आवश्यकता क्यों होगी? क्योंकि मेरे पास एक ईवेंट हैंडलर तत्वों के एक वर्ग से जुड़ा हुआ है, और मुझे यह जानना होगा कि किस विशेष तत्व ने इस घटना को ट्रिगर किया। मुझे उम्मीद है कि मैं यह सही कर रहा हूं।

— बुटिक बटुकस

Opps .. कि 1,122,603 ​​बार करें ..: P

— BvuRVKyUVlViVIc7

Answer 2

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

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

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

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

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

Comments

BTW, मुझे लगता है कि retval.push($(this).attr('id'))लिखा जा सकता हैretval.push(this.id)

— डैरेन कुक

: - आप HMTL5 डेटा की एक विशेषता की जरूरत है ** तो इस तरह कुछ का उपयोग return $('.selector').map(function(i, dom){ return $(dom).attr('data-id'); })

— निरस्त

.Selector गुण jQuery 1.7 में पदावनत किया गया था और केवल jQuery माइग्रेट प्लगइन में .live () का समर्थन करने के लिए आवश्यक सीमा तक बनाए रखा गया है। संपत्ति कभी भी चयनकर्ता का विश्वसनीय संकेतक नहीं थी, जिसका उपयोग वर्तमान में jQuery सेट में निहित तत्वों के सेट को प्राप्त करने के लिए किया जा सकता है, जहां यह एक संपत्ति थी, क्योंकि बाद के ट्रैवर्सल तरीकों ने सेट को बदल दिया हो सकता है।

— एंड्रयू डे

Answer 3

idएक html की संपत्ति है Element। हालाँकि, जब आप लिखते हैं $("#something"), तो यह एक jQuery ऑब्जेक्ट देता है जो मिलान DOM तत्व (ओं) को लपेटता है। पहला मिलान DOM तत्व वापस पाने के लिए, कॉल करेंget(0)

$("#test").get(0)

इस मूल तत्व पर, आप आईडी, या किसी अन्य मूल डोम संपत्ति या फ़ंक्शन को कॉल कर सकते हैं।

$("#test").get(0).id

यही कारण है कि idआपके कोड में काम नहीं कर रहा है।

वैकल्पिक रूप से, jQuery की attrविधि का उपयोग करें क्योंकि अन्य उत्तर idपहले मिलान तत्व की विशेषता प्राप्त करने का सुझाव देते हैं ।

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

Answer 4

उपरोक्त उत्तर महान हैं, लेकिन जैसा कि jquery विकसित होता है .. इसलिए आप यह भी कर सकते हैं:

var myId = $("#test").prop("id");

Comments

@cjbarth attr()को 1.0 में जोड़ा गया था, और prop()1.6 में जोड़ा गया था, इसलिए मैं मान रहा हूं कि आपकी टिप्पणी prop()नया तरीका है।

— एरिक फिलिप्स

@ErikPhilips मेरा मानना ​​है कि पुराने तरीके और नए तरीके के बजाय, यह निर्भर करता है कि क्या आप पेज लोड होने पर मूल उत्पादन में रुचि रखते हैं ( attrया स्क्रिप्ट द्वारा संशोधित prop)। यदि आप वास्तव में idक्लाइंट साइड स्क्रिप्ट का उपयोग करके किसी भी तत्व की विशेषता को संशोधित नहीं कर रहे हैं , तो propऔर attrसमान हैं।

— एंटोनचैनिंग

Answer 5

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

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

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

Answer 6

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

http://api.jquery.com/attr/

Answer 7

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

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

Answer 8

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

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

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

Answer 9

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

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

Answer 10

$('#test')एक jQuery वस्तु देता है, ताकि आप इसे object.idपाने के लिए बस का उपयोग नहीं कर सकतेId

आपको उपयोग करने की आवश्यकता है $('#test').attr('id'), जो आपके आवश्यक IDतत्व को वापस करता है

इसे निम्नानुसार भी किया जा सकता है,

$('#test').get(0).id जो के बराबर है document.getElementById('test').id

Comments

.. और $('#test')[0].idजो भी है.get(0)

— गेब्रियल पेट्रीओली

Answer 11

शायद दूसरों के लिए उपयोगी है जो इस धागे को ढूंढते हैं। नीचे दिया गया कोड तभी काम करेगा जब आप पहले से ही 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();

Answer 12

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

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

Answer 13

यह एक पुराना सवाल है, लेकिन 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एक DOM तत्व है, तो:

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

Answer 14

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

Answer 15

यह तत्व आईडी, वर्ग या स्वचालित रूप से भी उपयोग किया जा सकता है

------------------------
$(this).attr('id');
=========================
------------------------
$("a.remove[data-id='2']").attr('id');
=========================
------------------------
$("#abc1'").attr('id');
=========================

Answer 16

महत्वपूर्ण: यदि आप jQuery के साथ एक नया ऑब्जेक्ट बना रहे हैं और किसी ईवेंट को बाइंड कर रहे हैं, तो आप इस तरह प्रोप का उपयोग करें न कि एट्री का :

$("<div/>",{ id: "yourId", class: "yourClass", html: "<span></span>" }).on("click", function(e) { alert($(this).prop("id")); }).appendTo("#something");

Answer 17

यह अंततः आपकी समस्याओं को हल करेगा:

मान लें कि आपके पास एक पृष्ठ पर कई बटन हैं और आप उनमें से एक को अपनी आईडी के आधार पर jQuery Ajax (या 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 से लिया गया और बदल दिया गया।

Answer 18

<html>
<head>
  <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
<?php
    // include Database connection file 
    include("db_connection.php");

    // Design initial table header 
    $data = '<table class="table table-bordered table-striped">
                        <tr>
                            <th>No.</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Email Address</th>
                            <th>Update</th>
                            <th>Delete</th>
                        </tr>';
    $query = "SELECT * FROM users";
    if (!$result = mysqli_query($con, $query)) {
        exit(mysqli_error($con));
    }
    // if query results contains rows then featch those rows 
    if(mysqli_num_rows($result) > 0)
    {
        $number = 1;
        while($row = mysqli_fetch_assoc($result))
        {
            $data .= '<tr>
                <td>'.$number.'</td>
                <td>'.$row['first_name'].'</td>
                <td>'.$row['last_name'].'</td>
                <td>'.$row['email'].'</td>
                    <td><button onclick="DeleteUser('.$row['id'].')" class="btn btn-danger">Delete</button>
                </td>
            </tr>';
            $number++;
        }
    }

    else
    {
        // records now found 
        $data .= '<tr><td colspan="6">Records not found!</td></tr>';
    }

    $data .= '</table>';
    echo $data;
?>

<script type="text/javascript">

    function DeleteUser(id) {
    var conf = confirm("Are you sure, do you really want to delete User?");
    if (conf == true) {
        $.ajax({
                    url:'deleteUser.php',
                    method:'POST',
                    data:{
                        id:id
                    },
            success:function(data){
                      alert('delete successfully');
                   }




}
});

deleteUser.php

<?php
// check request
if(isset($_POST['id']) && isset($_POST['id']) != "")
{
    // include Database connection file
    include("db_connection.php");

    // get user id
    $user_id = $_POST['id'];

    // delete User
    $query = "DELETE FROM users WHERE id = '$user_id'";
    if (!$result = mysqli_query($con, $query)) {
        exit(mysqli_error($con));
    }
}
?>

Answer 19

यह ओपी का जवाब नहीं देता है, लेकिन दूसरों के लिए दिलचस्प हो सकता है: आप .idइस मामले में क्षेत्र तक पहुंच सकते हैं :

$('#drop-insert').map((i, o) => o.id)

Comments

मैं नीच लोगों का आभारी हूँ जब वे समझाते हैं कि मेरी समझ में क्या गलत है। अन्यथा मैं उन्हें मच्छर के रूप में दिलचस्प लगता हूं।

— मारीतोमो