JQuery භාවිතා කරමින් මූලද්‍රව්‍යයක හැඳුනුම්පත ලබා ගන්නේ කෙසේද?

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

ඉහත ක්‍රියා නොකරන්නේ ඇයි, මම මෙය කළ යුත්තේ කෙසේද?

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 තේරීම් සහ ය ප්රතිඵල ප්රතිලාභ රැසක් () නොවේ ප්රකෘති ක්රියාකාරිත්වය විසින් එකම මුලද්රව්යයේ

jquery හි DOM තේරීම සඳහා විකල්පයක් වේ

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

වන වෙනස් වන .attr()හා $('#test').prop('foo')විශ්ලේෂණයට DOM දක්වා දිනා fooඇති අතර, දේපළ $('#test').attr('foo')පුරවමින් HTML වලින් දක්වා fooවිශේෂණය සහ ඔබ වෙනස්කම් ගැන වැඩි විස්තර සොයා ගත හැකි මෙහි .

$('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})

idයනු html හි දේපලකි Element. කෙසේ වෙතත්, ඔබ ලියන විට $("#something"), එය ගැලපෙන DOM මූලද්‍රව්‍යය (ය) ඔතා jQuery වස්තුවක් ලබා දෙයි. ගැලපෙන පළමු DOM අංගය නැවත ලබා ගැනීමට, අමතන්නget(0)

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

මෙම දේශීය මූලද්‍රව්‍යය මත, ඔබට හැඳුනුම්පත හෝ වෙනත් දේශීය DOM දේපලක් හෝ ශ්‍රිතයක් ඇමතිය හැකිය.

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

idඔබේ කේතය තුළ ක්‍රියා නොකිරීමට හේතුව එයයි .

විකල්පයක් ලෙස, පළමු ගැලපෙන මූලද්‍රව්‍යයේ ගුණාංගය attrලබා ගැනීමට වෙනත් පිළිතුරු යෝජනා කරන පරිදි jQuery ක්‍රමය භාවිතා කරන්න id.

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

ඉහත පිළිතුරු විශිෂ්ටයි, නමුත් jquery පරිණාමය වන විට .. එබැවින් ඔබටද කළ හැකිය:

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

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

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

සමහර පිරික්සුම් කේත ඇත්ත වශයෙන්ම අවශ්‍ය නමුත් පහසුවෙන් ක්‍රියාත්මක කළ හැකිය!

.idවලංගු jquery ශ්‍රිතයක් නොවේ. .attr()මූලද්‍රව්‍යයක් සතු ගුණාංග වෙත ප්‍රවේශ වීම සඳහා ඔබ ශ්‍රිතය භාවිතා කළ යුතුය . .attr()පරාමිති දෙකක් නියම කිරීමෙන් ඔබට ගුණාංග අගය වෙනස් කිරීමට හෝ දෙකටම භාවිතා කළ හැකිය , නැතහොත් එකක් නියම කිරීමෙන් අගය ලබා ගන්න.

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

ඔබට මූලද්‍රව්‍යයක හැඳුනුම්පතක් ලබා ගැනීමට අවශ්‍ය නම්, පන්ති තේරීම්කරුවෙකු විසින් කියමු, එම විශේෂිත මූලද්‍රව්‍යය මත යම් සිදුවීමක් (මෙම අවස්ථාවේදී ක්ලික් කරන්න සිදුවීමක්) වෙඩි තැබූ විට, පහත සඳහන් කාර්යය ඉටු කරනු ඇත:

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

$('#test').attr('id') ඔබේ උදාහරණයේ:

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

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

හොඳයි, විසඳුමක් නොමැති බව පෙනෙන අතර 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 පුස්තකාලයට ඇතුළත් වීමේ ආරම්භයකි.

තනි නූල් අගයක් හෝ නූල් අගයන් පෙළක් ලබා දෙයි. නූල් අගයන්හි අරාව, බහු මූලද්‍රව්‍ය තේරීම් කාරකයක් භාවිතා කළ අවස්ථාව සඳහා ය.

$('#test')jQuery වස්තුවක් නැවත ලබා දෙයි, එබැවින් ඔබට එය object.idලබා ගැනීමට සරලව භාවිතා කළ නොහැකId

ඔබ භාවිතා කිරීමට අවශ්‍යයි $('#test').attr('id'), එමඟින් ඔබට අවශ්‍ය IDමූලද්‍රව්‍යය නැවත ලබා දේ

මෙය ද පහත පරිදි කළ හැකිය,

$('#test').get(0).id එය සමාන වේ document.getElementById('test').id

මෙම ත්‍රෙඩ් එක සොයා ගන්නා අනෙක් අයට ප්‍රයෝජනවත් විය හැක. පහත කේතය ක්‍රියාත්මක වන්නේ ඔබ දැනටමත් 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();

$('tagname').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, DOM අංගයක් නම්, එසේ නම්:

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

සිට id විශ්ලේෂණයක් වන අතර, ඔබ විසින් භාවිතා කර එය ලබා ගත හැක attrක්රමය.

මෙය මූලද්‍රව්‍ය හැඳුනුම්පත, පංතිය හෝ ඉරට්ටේ ස්වයංක්‍රීයව භාවිතා කළ හැකිය

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

වැදගත්: ඔබ jQuery සමග නව වස්තුව නිර්මාණය කිරීම සහ සිද්ධියක් බන්ධන නම්, ඔබ යුතුය භාවිතා මුක්කුවක් නොව attr , මේ වගේ:

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

මෙය අවසානයේ ඔබේ ගැටළු විසඳනු ඇත:

ඔබට පිටුවක බොත්තම් බොහොමයක් ඇති බවත්, ඒවායේ හැඳුනුම්පත අනුව jQuery අජැක්ස් (හෝ අජැක්ස් නොවේ) සමඟ ඒවා වෙනස් කිරීමට ඔබට අවශ්‍ය බවත් කියමු.

ඔබට විවිධ වර්ගයේ බොත්තම් ඇති බව (ආකෘති සඳහා, අනුමැතිය සඳහා සහ ඒ හා සමාන අරමුණු සඳහා) ඇති බවත්, ඔබට අවශ්‍ය වන්නේ 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>

කේතය w3 පාසල් වලින් ගෙන වෙනස් කරන ලදි.

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

එය OP ට පිළිතුරු නොදෙන නමුත් අනෙක් අයට සිත්ගන්නාසුළු විය හැකිය: ඔබට .idමෙම අවස්ථාවේදී ක්ෂේත්‍රයට පිවිසිය හැකිය :

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