Як я можу отримати ідентифікатор елемента за допомогою jQuery?


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

Чому вищезгадане не працює, і як мені це зробити?


5
Отримання ідентифікатора елемента, вибраного за допомогою його ідентифікатора? oO
Мартін Шнайдер

Зразок коду. Я працюю над тригером події, який використовує "це", і мені потрібно знати, що викликало подію, і незалежно відстежувати, скільки разів спрацьовує кожен елемент. Побудова вибірки з "цим" буде занадто великою.
Нельсон

Відповіді:


2303

Спосіб 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, і ви можете дізнатися більше деталей про відмінності тут .


234
Мене щоразу дивує, що у jQuery немає ярлика для подібного $('#test').id().
трепет

5
Це буде дуже рідко, оскільки ідентифікатори, як правило, важко закодовані в HTML та JS. Коли ви пишете JS, ви вже знаєте ідентифікатор якогось елемента, тому ви пишете цей ідентифікатор для отримання елемента. Рідко вам потрібно отримати ідентифікатор елемента програмно.
daniel1426

10
Зробіть це 164969 разів. Плюс зараз я тут. У мене є код, який ініціалізує форми. Деякі форми мають особливі вимоги. Я міг би шукати конкретні елементи форми, щоб вирішити, що робити, але я думаю, що визначення форми - таким чином ідентифікатор форми - є найбільш логічним і надійним способом.
Slashback

50
Чому мені потрібно отримати ідентифікатор елемента? Оскільки у мене є обробник подій, приєднаний до класу елементів, і мені потрібно знати, який саме елемент викликав подію. Я сподіваюся, що я роблю це правильно.
Buttle Butkus

4
Опс .. зробіть це 1122603 рази ..: P
BvuRVKyUVlViVIc7

85

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

9
До речі, я думаю, що 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 і зберігається лише в тій мірі, яка необхідна для підтримки .live () у плагіні jQuery Migrate. Властивість ніколи не була надійним індикатором селектора, який міг би бути використаний для отримання набору елементів, що зараз містяться в наборі jQuery, де це було властивістю, оскільки наступні способи обходу, можливо, змінили набір.
Андрій День

40

idє властивістю html Element. Однак, коли ви пишете $("#something"), він повертає об’єкт jQuery, який обертає відповідні елементи DOM. Щоб повернути перший відповідний елемент DOM, зателефонуйтеget(0)

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

На цьому нативному елементі ви можете викликати ідентифікатор або будь-яке інше властиве значення або функцію DOM

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

Ось чому причина idне працює у вашому коді.

Крім того, використовуйте attrметод jQuery, оскільки інші відповіді пропонують отримати idатрибут першого відповідного елемента.

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

25

Наведені вище відповіді чудові, але як розвивається jquery .. тож ви також можете робити:

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

4
@cjbarth attr()був доданий в 1.0, а prop()в 1.6, тому я припускаю, що ваш коментар prop()- це новий спосіб.
Ерік Філіпс

3
@ErikPhilips Я вважаю, що не від старого і нового способу, це залежить від того, цікавить ви оригінальний вихід при завантаженні сторінки ( attr) або потенційно модифікований скриптом ( prop). Якщо ви на самому ділі не змінюючи idатрибут будь-якого елементу , використовуючи клієнтський скрипт, то propі attrідентичні.
AntonChanning

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

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

Якийсь код перевірки потрібен, звичайно, але легко реалізується!


9

.idне є дійсною функцією jquery. Потрібно використовувати .attr()функцію для доступу до атрибутів, якими володіє елемент. Можна використовувати.attr() як змінити значення атрибута, вказавши два параметри, або отримати значення, вказавши один.

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


7

Якщо ви хочете отримати ідентифікатор елемента, скажімо, селектором класу, коли подія (у даному випадку натисніть подію) була запущена на цей конкретний елемент, тоді виконає наступне:

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

6

$('#test').attr('id') У вашому прикладі:

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

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

5

Ну, схоже, рішення не знайшлося, і я хотів би запропонувати власне рішення, яке є розширенням прототипу 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.

Повертає або значення одного рядка, або значення масиву рядків. Масив рядкових значень, для події був використаний багатоелементний селектор.


4

$('#test') повертає об’єкт jQuery, тому його не можна просто використовувати object.id щоб отримати йогоId

вам потрібно скористатися $('#test').attr('id'), що поверне потрібнеID вам елементи

Це також можна зробити так,

$('#test').get(0).id що дорівнює document.getElementById('test').id


1
.. і також $('#test')[0].idте саме, що.get(0)
Габріеле Петріолі

3

Можливо, корисно для інших, хто знайде цю тему. Код нижче буде працювати, лише якщо ви вже використовуєте 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();

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

За допомогою наведеного вище коду ви можете отримати ідентифікатор.


2

Це старе запитання, але станом на 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!


0

Це може бути ідентифікатор елемента, клас або автоматично з використанням парного

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

-1

Важливо: якщо ви створюєте новий об'єкт за допомогою jQuery і прив'язуєте подію, ви ОБОВ'ЯЗКОВО використовувати проп, а не attr , як це:

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


-1

Це нарешті вирішить ваші проблеми:

скажемо, у вас на сторінці багато кнопок, і ви хочете змінити одну з них за допомогою 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 та змінено.


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

-1

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

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

1
Я вдячний агрономам, коли вони пояснюють, що не так у моєму розумінні. інакше я вважаю їх такими ж цікавими, як комар.
mariotomo
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.