Як я можу отримати ідентифікатор елемента за допомогою 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 і повертає масив () результатів не один елемент за замовчуванням

альтернативою селектору DOM в jquery є

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

який відрізняється від .attr()та $('#test').prop('foo')захоплює вказане fooвластивість DOM , в той час як $('#test').attr('foo')захоплює вказаний fooатрибут HTML, і ви можете дізнатися більше деталей про відмінності тут .

$('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"), він повертає об’єкт jQuery, який обертає відповідні елементи DOM. Щоб повернути перший відповідний елемент 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. Я поміщаю це у файл Helper, який завантажується після бібліотеки 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 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 та змінено.

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

він не відповідає ОП, але може бути цікавим іншим: .idу цьому випадку ви можете отримати доступ до поля:

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