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

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

1273 голосов
/ 13 июля 2010 
<div id="test"></div>
<script>
  $(document).ready(function() {
    alert($('#test').id);
  });  
</script>

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

Ответы [ 19 ]

4 голосов
/ 17 февраля 2016

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

Это старый вопрос, , но с 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 голосов
/ 03 сентября 2013 
$('tagname').attr('id');

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

1 голос
/ 03 августа 2015

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

------------------------
$(this).attr('id');
=========================
------------------------
$("a.remove[data-id='2']").attr('id');
=========================
------------------------
$("#abc1'").attr('id');
=========================
0 голосов
/ 14 ноября 2017

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

0 голосов
/ 19 августа 2015

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

Допустим, у вас есть много кнопок на странице, и вы хотите изменить одну из них с помощью 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 голосов
/ 14 января 2019 
<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 голосов
/ 04 мая 2019

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

$('#drop-insert').map((i, o) => o.id)
0 голосов
/ 15 июля 2015

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...