Как я могу получить идентификатор элемента с помощью 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>

Ответ 2

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

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

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

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

.id не является допустимой функцией jquery. Вам нужно использовать функцию .attr() для доступа к атрибутам, которыми обладает элемент. Вы можете использовать .attr() для изменения значения атрибута, указав два параметра или получить значение, указав его.

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

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

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

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

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

Ответ 10

$('#test').attr('id') В вашем примере:

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

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

Ответ 11

Может быть полезно для других, которые находят эту тему. Код ниже будет работать, только если вы уже используете 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();

Ответ 12

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

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

Ответ 13

Это старый вопрос , но с 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!

Ответ 14

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

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

Ответ 15

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

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

Ответ 16

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

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

Ответ 17

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

Ответ 18

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

Ответ 19

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

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