Как я могу получить идентификатор элемента с помощью jQuery?


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

Почему вышеперечисленное не работает, и как мне это сделать?


5
Получение идентификатора элемента, который был выбран через его идентификатор? oO
Мартин Шнайдер

Образец кода. Я работаю над триггером событий, который использует «this», и мне нужно знать, что вызвало событие, и независимо отслеживать, сколько раз срабатывает каждый элемент. Создание выборки с «этим» будет слишком большим.
Нельсон

Ответы:


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 и возвращает array () результатов, а не один элемент, по умолчанию

альтернатива для селектора 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 раз. Плюс теперь я здесь. У меня есть код, который инициализирует формы. К некоторым формам предъявляются особые требования. Я мог бы искать конкретные элементы формы, чтобы решить, что делать, но я думаю, что определение формы - то есть идентификатора формы - является наиболее логичным и надежным способом.
Слэшбэк

50
Зачем мне нужен идентификатор элемента? Потому что у меня есть обработчик событий, связанный с классом элементов, и мне нужно знать, какой именно элемент вызвал событие. Я надеюсь, что я делаю это правильно.
Баттл Буткус

4
Оппс .. сделай это 1,122,603 ​​раза ..: 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)

Для этого нативного элемента вы можете вызвать id или любое другое нативное свойство или функцию 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) или в том, что потенциально может быть изменено script ( 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

Если вы хотите получить идентификатор элемента, скажем, с помощью селектора классов, когда событие (в данном случае событие click) было запущено для этого конкретного элемента, то следующее будет делать эту работу:

 $('.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 и связываете событие, вы ДОЛЖНЫ использовать prop, а не 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

он не отвечает на OP, но может быть интересен другим: вы можете получить доступ к .idполю в этом случае:

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

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