Как получить ID элемента с помощью jQuery?

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

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

Комментарии к вопросу (1)
Решение

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

Комментарии (20)

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

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

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

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

return $('.selector').map(function(index,dom){return dom.id})
Комментарии (3)

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")
Комментарии (0)

Выше ответы-это здорово, но как jQuery развивается.. так что вы можете сделать:

var myId = $("#test").prop("id");
Комментарии (3)
$.fn.extend({
    id : function() {
        return this.attr('id');
    }
});

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

Некоторые проверки кода требуется, конечно, но легко реализуются!

Комментарии (1)

.ID - это не действительный функции jQuery. Вы должны использовать .функция м() для доступа к атрибутам элемента обладает. Вы можете использовать `.м () как изменить значение атрибута путем задания двух параметров, или получить значение, определяя одно.

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

Комментарии (0)

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

 $('.your-selector').click(function(){
       var id = $(this).attr('id');
 });
Комментарии (0)

Ну, кажется, не было решения и хотел бы предложить мое собственное решение, является расширение библиотеки jQuery прототипа'ов. Я положил это в вспомогательный файл, который загружается после библиотеки jQuery, поэтому проверьте окна.в 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.

Возвращает одну строку значение или массив строковых значений. Массив строковых значений, для мероприятия был использован многоэлементный селектора.

Комментарии (0)

$('#test') возвращает объект jQuery, поэтому вы не можете'использовать просто object.id для получения его Id.

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

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

$('#test').get(0).id, который равен document.getElementById('test').id.

Комментарии (1)

$(&#39;#тест&#39;).М(&#39;ид&#39;) В вашем примере:

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

$(document).ready(function() {
    alert($('#test').attr('id'));
}); 
Комментарии (0)

Может быть полезно для других, что найти эту нить. Приведенный ниже код будет работать только если вы уже используете jQuery. Функция всегда возвращает идентификатор. Если элемент не't имеет идентификатор функция генерирует идентификатор и добавить данный элемент.

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();
Комментарии (0)
$('tagname').attr('id');

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

Комментарии (0)

Это старый вопрос, *но в 2015 году это может реально работать:

$('#test').id;

И вы также можете сделать задания:

$('#test').id = "abc";

Как долго, как вы определите следующие jQuery плагин:

Object.defineProperty($.fn, 'id', {
    get: function () { return this.attr("id"); },
    set: function (newValue) { this.attr("id", newValue); }
});

Интересно, если "элемент" - это элемент DOM, то:

element.id === $(element).id; // Is true!
Комментарии (0)

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

------------------------
$(this).attr('id');
=========================
------------------------
$("a.remove[data-id='2']").attr('id');
=========================
------------------------
$("#abc1'").attr('id');
=========================
Комментарии (0)

С ИД является атрибутом, вы можете сделать это с помощью м метод.

Комментарии (0)

это не ответ на ОП, но может быть интересно другим: вы можете получить доступ к `.поле идентификатор в этом случае:

в JavaScript $(&#39;#падение-вставка&#39;).карта((я, о) => о'.ИД)

Комментарии (1)

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

$(" в<див/>" в,{ ИД: "по yourId наша" Класс "и в yourclass-то", так и" в<промежуток></службы>", у }).на (на"нажмите", функция(е) { Алерт($(это).проп (на"идентификатор", у)); }).добавление(" и#что-то");

Комментарии (0)

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

допустим, у вас есть много кнопок на странице, и вы хотите изменить один из них с jQuery Аякс (или не Аякс) в зависимости от их ID.

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

здесь это код, который работает: в jQuery будет лечить только кнопки, которые относятся к классу .ЦБС-hlpb, он будет принимать ID кнопки, которая была нажата и изменять ее в зависимости от данных, которые поступают от "Аякса".





<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>



<input type="button" class="clshlpbtn" id="btnhlp-1" value="first btn">            
Комментарии (0)



  <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>

<?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>Delete
                </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));
    }
}
?>
Комментарии (0)