it-roy-ru.com

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

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

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

1260
fearofawhackplanet

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 foo, и вы можете найти более подробную информацию о различиях здесь .

2070
instanceof me

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

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

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

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

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

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

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

var myId = $("#test").prop("id");
25
Chris
$.fn.extend({
    id : function() {
        return this.attr('id');
    }
});

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

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

22
stat

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

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

10
Joey C.

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

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

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

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

5
GoldBishop

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

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

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

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

5
user372551

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

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

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

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

Это старый вопрос но по состоянию на 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!
3
MarcG
$('tagname').attr('id');

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

3
Jaymin

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

------------------------
$(this).attr('id');
=========================
------------------------
$("a.remove[data-id='2']").attr('id');
=========================
------------------------
$("#abc1'").attr('id');
=========================
1
danielad
<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));
    }
}
?>
0
Himani

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

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

0
user3495363

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

0
Oussidi Mohamed

Важно: если вы создаете новый объект с помощью jQuery и связываете событие, вы ДОЛЖНЫ использовать prop , а не attr , вот так:

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

0
Camila S.

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

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