আমি কীভাবে 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>

বা ডোমের মাধ্যমে:

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

অথবা এমনকি :

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

এবং $('#test').get(0)JQuery বা এমনকি এর ব্যবহারের পিছনে কারণ $('#test')[0]হ'ল এটি $('#test')একটি জিকিউরি নির্বাচক এবং ফলাফলগুলির একটি অ্যারে () এর ডিফল্ট কার্যকারিতা দ্বারা কোনও একক উপাদানকে দেয় না

jquery মধ্যে DOM নির্বাচক জন্য একটি বিকল্প হয়

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

যা থেকে ভিন্ন .attr()এবং $('#test').prop('foo')নির্দিষ্ট করে DOM grabs fooযখন সম্পত্তি, $('#test').attr('foo')দখল নিদিষ্ট এইচটিএমএল fooঅ্যাট্রিবিউট এবং আপনি পার্থক্য সম্পর্কে আরো বিস্তারিত জানতে পারেন এখানে ।

Comments

এটি আমাকে প্রতিবারই বিস্মিত করে যে jQuery এর মতো এর জন্য একটি শর্টকাট নেই $('#test').id()।

— বিস্মিত

এটি খুব কমই কার্যকর হবে কারণ আইডি এর সাধারণত এইচটিএমএল এবং জেএস-তে হার্ড-কোডড থাকে। আপনি যখন জেএস লিখেন, আপনি ইতিমধ্যে কিছু উপাদানের আইডি জানেন, সুতরাং উপাদানটি পুনরুদ্ধার করতে আপনি সেই আইডি লিখেন। আপনার খুব কমই প্রোগ্রামিয়ালি কোনও উপাদানটির আইডি পাওয়া দরকার।

— daniel1426

এটি 164969 বার করুন। প্লাস এখন আমি এখানে আছি। আমার কাছে কোড রয়েছে যা ফর্মগুলির সূচনা করে। কয়েকটি ফর্মের বিশেষ প্রয়োজনীয়তা রয়েছে। আমি কী করব তা স্থির করার জন্য নির্দিষ্ট ফর্মের উপাদানগুলির সন্ধান করতে পারলাম , তবে আমি মনে করি ফর্মটি সনাক্তকরণ - এইভাবে ফর্মের আইডি - সবচেয়ে যুক্তিসঙ্গত এবং নিশ্চিত আগুনের উপায়।

— স্ল্যাশব্যাক

আমার কেন কোনও এলিমেন্টের আইডি লাগবে? কারণ আমার কাছে একটি ইভেন্ট হ্যান্ডলার একটি শ্রেণীর উপাদানগুলির সাথে সংযুক্ত রয়েছে, এবং কোন বিশেষ উপাদানটি ইভেন্টটি ট্রিগার করেছিল তা আমার জানতে হবে। আমি আশা করি আমি এটি সঠিকভাবে করছি

— বাটল বুট্কাস

ওপস .. এটি 1,122,603 ​​বার করুন ..: পি

— 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

বিটিডাব্লু, আমার মনে হয় retval.push($(this).attr('id'))লেখা যেতে পারেretval.push(this.id)

— ড্যারেন কুক

আপনার যদি এইচএমটিএল 5 ডেটার একটি অ্যাট্রিবিউট প্রয়োজন - ** তাহলে এরকম কিছু ব্যবহার করুন: return $('.selector').map(function(i, dom){ return $(dom).attr('data-id'); })

— প্রত্যাহার করুন

.নির্বাচক সম্পত্তি jQuery 1.7 এ অবমূল্যায়ন করা হয়েছিল এবং কেবল jQuery মাইগ্রেট প্লাগইনে .live () সমর্থন করার জন্য প্রয়োজনীয় পরিমাণে রক্ষা করা হয়। সম্পত্তিটি নির্বাচকটির কোনও নির্ভরযোগ্য সূচক ছিল না যেটি বর্তমানে জকিউয়ারি সেটে যেখানে একটি সম্পত্তি ছিল সেগুলিতে থাকা উপাদানগুলির সেটটি অর্জন করতে ব্যবহার করা যেতে পারে, কারণ পরবর্তী ট্র্যাভারসাল পদ্ধতিগুলি সেটটি পরিবর্তিত হতে পারে।

— অ্যান্ড্রু ডে

Answer 3

idএইচটিএমএল এর সম্পত্তি Element। যাইহোক, আপনি যখন লিখবেন $("#something"), এটি একটি jQuery অবজেক্ট ফেরত দেয় যা মিলে যাওয়া DOM উপাদান (গুলি) কে আবৃত করে। প্রথম মিলের ডিওএম উপাদানটি ফিরে পেতে কল করুনget(0)

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

এই নেটিভ এলিমেন্টে, আপনি আইডি, বা অন্য কোনও নেটিভ DOM সম্পত্তি বা ফাংশন কল করতে পারেন।

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

idআপনার কোডে কাজ না করার কারণ ।

বিকল্পভাবে, jQuery এর attrপদ্ধতিটি ব্যবহার করুন কারণ অন্যান্য উত্তরগুলি idপ্রথম মিলের উপাদানটির বৈশিষ্ট্য পেতে পরামর্শ দেয় ।

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

Answer 4

উপরের উত্তরগুলি দুর্দান্ত, তবে যেমন jquery বিকশিত হয় .. সুতরাং আপনি এটি করতেও পারেন:

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

Comments

@ সিজেবার্থকে attr()1.0 prop()এ যুক্ত করা হয়েছিল এবং 1.6-এ যুক্ত করা হয়েছিল, তাই আমি ধরে নিচ্ছি আপনার মন্তব্যটি prop()নতুন উপায় way

— এরিক ফিলিপস

@ এরিক ফিলিপস আমি বিশ্বাস করি, পুরানো উপায় এবং নতুন উপায়ে নয়, পৃষ্ঠাটি লোড হওয়ার সময় আপনি মূল আউটপুটটিতে আগ্রহী কিনা তা নির্ভর করে ( 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

ঠিক আছে, মনে হয় এর কোনও সমাধান হয়নি এবং আমার নিজের সমাধানটি প্রস্তাব করতে চাই যা জিকুয়েরি প্রোটোটাইপগুলির সম্প্রসারণ। আমি এটিকে কোনও হেল্পার ফাইলে রেখেছি যা জিকুয়েরি লাইব্রেরির পরে লোড করা হয়েছে, সেইজন্য চেক করুন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');
        }
    }
}

এটি নিখুঁত নাও হতে পারে তবে এটি সম্ভবত জিকুয়ের লাইব্রেরিতে অন্তর্ভুক্তির শুরু।

একটি একক স্ট্রিং মান বা স্ট্রিং মানগুলির একটি অ্যারে প্রদান করে। স্ট্রিং মানগুলির অ্যারে, ইভেন্টটির জন্য একটি বহু-উপাদান নির্বাচক ব্যবহৃত হয়েছিল।

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

এটি একটি পুরানো প্রশ্ন, তবে ২০১৫ সালের মতো এটি আসলে কার্যকর হতে পারে:

$('#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!

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 (বা এজাক্স নয়) এর মধ্যে একটি পরিবর্তন করতে চান।

আপনার আরও অনেক ধরণের বোতাম রয়েছে বলেও জানায় (ফর্মগুলির জন্য, অনুমোদনের জন্য এবং পছন্দসই উদ্দেশ্যে), এবং আপনি jQuery কেবল "লাইক" বোতামগুলির চিকিত্সা করতে চান।

এখানে একটি কোড রয়েছে যা কাজ করছে: jQuery কেবল ক্লাস .cls-hlpb শ্রেণীর বোতামগুলির সাথে চিকিত্সা করবে, এটি ক্লিক করা বোতামটির আইডি নেবে এবং এজ্যাক্স থেকে আগত ডেটা অনুসারে এটি পরিবর্তন করবে।

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

কোড ডাব্লু 3 স্কুল থেকে নেওয়া হয়েছিল এবং পরিবর্তিত হয়েছিল।

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

ডাউনটা লোকেরা যখন আমার বোধগম্যতার মধ্যে ভুল আছে তখন তারা ব্যাখ্যা করে আমি কৃতজ্ঞ। অন্যথায় আমি এগুলিকে মশার মতো আকর্ষণীয় মনে করি।

— মারিওটোমো