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



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


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

554   17  

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

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

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

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

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

на этом собственном элементе вы можете вызвать id или любое другое собственное свойство или функцию 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/

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

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

используя приведенный выше код, вы можете получить идентификатор.

Это старый вопрос, но по состоянию на 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 и обязательное мероприятие, вы должны использовать опора, а не attr, например:

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

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

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

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

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

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

вот код, который работает: 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 и изменен.

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

Comments

    Ничего не найдено.