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

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

почему это не работает, и как я должен это сделать?

17 ответов


путь jQuery:

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

в вашем примере:

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

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

или через 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') захватывает указанный DOM foo свойство, в то время как $('#test').attr('foo') захватывает указанный HTML и вы можете найти более подробную информацию о различиях здесь.


$('selector').attr('id') вернет идентификатор первого сопоставленного элемента. ссылка.

если ваш подобранный набор содержит более одного элемента, вы можете использовать обычный .each итератор возвращает массив, содержащий каждый из идентификаторов:

var retval = []
$('selector').each(function(){
  retval.push($(this).attr('id'))
})
return retval

или, если вы готовы получить немного grittier, вы можете избежать обертки и использовать .map ярлык.

return $('.selector').map(function(index,dom){return dom.id})

id является свойством html Element. Однако, когда вы пишете $("#something"), он возвращает объект jQuery, который обертывает соответствующие элементы DOM. Чтобы вернуть первый соответствующий элемент DOM, вызовите get(0)

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

в этом собственном элементе можно вызвать id или любое другое свойство или функцию native DOM.

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

вот почему id не работает в коде.

в качестве альтернативы используйте jQuery attr метод, как и другие ответы предложите получить 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') возвращает объект jQuery, поэтому вы не можете использовать просто object.id, чтобы получить Id

вам нужно использовать $('#test').attr('id'), который возвращает ваш необходимый ID элемента

это также можно сделать следующим образом,

$('#test').get(0).id что равно document.getElementById('test').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').attr('id') В вашем примере:

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

$(document).ready(function() {
    alert($('#test').attr('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');

используя вышеуказанный код, вы можете получить 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!

важно: если вы создаете новый объект с помощью jQuery и обязательное мероприятие, вы должны использовать prop, а не attr, например:

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


это может быть идентификатор элемента, класс или автоматическое использование even

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

это, наконец, решит ваши проблемы:

допустим, у вас есть много кнопок на странице, и вы хотите изменить одну из них с помощью jQuery Ajax (или не ajax) в зависимости от их идентификатора.

давайте также скажем, что у вас есть много разных типов кнопок (для форм, для утверждения и для подобных целей), и вы хотите, чтобы jQuery обрабатывал только кнопки "Нравится".

вот код, который работает: jQuery будет обрабатывать только кнопки, которые имеют класс .cls-hlpb, он примет id кнопки, которая была нажата и изменит его в соответствии с данными, которые поступают из 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 и изменен.


С id является атрибутом, вы можете получить его с помощью attr метод.