복붙노트

[JQUERY] 어떻게 jQuery를 사용하여 요소의 ID를 얻을 수 있나요?

JQUERY

어떻게 jQuery를 사용하여 요소의 ID를 얻을 수 있나요?

해결법

  1. 1.JQuery와 방법 :

    JQuery와 방법 :

    $('#test').attr('id')

    당신의 예에서 :

    $ (문서) .ready (함수 () { 을 console.log ($ ( '# 테스트') ATTR ( 'ID').); }); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

    또는 DOM을 통해 :

    $('#test').get(0).id;

    또는 :

    $('#test')[0].id;

    등) ($ ( '# 테스트')의 사용 뒤에 이유는. JQuery와에 (0)를 얻을 수 또는 $ ( '# 테스트') [0] $ ( '# 테스트') JQuery와 선택기 반환 배열을 점이다 기본 기능에 의한 결과가 아니라 하나의 요소

    JQuery와 DOM의 선택에 대한 대안은

    $('#test').prop('id')

    . .attr ()와 $ ( '# 테스트') 다른 $은 ( '# 테스트'). ATTR ( 'foo는')가 지정된 HTML foo를 잡고있는 동안 소품 ( 'foo는')는, 지정된 DOM foo는 속성을 잡고있는 속성과 여기의 차이에 대한 자세한 내용을 확인할 수 있습니다.

  2. 2.$ ( '선택'). ATTR ( 'ID')는 첫 번째 일치하는 요소의 ID를 반환한다. 참고.

    $ ( '선택'). ATTR ( 'ID')는 첫 번째 일치하는 요소의 ID를 반환한다. 참고.

    당신의 일치 세트 두 개 이상의 요소가있는 경우에, 당신은 ID의 각을 포함하는 배열을 반환하기 위해 기존의 .each 반복자를 사용할 수 있습니다 :

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

    조금 grittier을받을 의향이있는 경우 또는, 당신은 래퍼를 피하고 .MAP 바로 가기를 사용할 수 있습니다.

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

  3. 3.ID는 HTML 요소의 속성입니다. 당신이 ( "# 뭔가를") $를 쓸 때, 그것은 일치하는 DOM 요소 (들) 래핑의 jQuery 객체를 반환합니다. 첫 번째 일치하는 DOM 요소 다시 얻으려면, 전화 GET (0)

    ID는 HTML 요소의 속성입니다. 당신이 ( "# 뭔가를") $를 쓸 때, 그것은 일치하는 DOM 요소 (들) 래핑의 jQuery 객체를 반환합니다. 첫 번째 일치하는 DOM 요소 다시 얻으려면, 전화 GET (0)

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

    이 기본 요소에, 당신은 ID 또는 다른 기본 DOM 속성이나 함수를 호출 할 수 있습니다.

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

    즉 ID가 코드에서 작동하지 않는 이유입니다.

    다른 답변이 일치하는 첫 번째 요소의 id 속성을 얻기 위해 제안으로 또는 jQuery의 ATTR 방법을 사용합니다.

    $("#test").attr("id")

  4. 4.답변보다도 훌륭하지만, JQuery와 진화 등 .. 당신도 할 수 있습니다 :

    답변보다도 훌륭하지만, JQuery와 진화 등 .. 당신도 할 수 있습니다 :

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

  5. 5.

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

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

    일부 검사 코드는 물론 필요하지만 쉽게 구현!

  6. 6..ID 유효한 JQuery와 함수가 아니다. 당신은 액세스에 .attr () 함수를 사용할 필요가 속성 요소를 가지고있다. 당신은 두 개의 매개 변수를 지정하여 모두 변화 () 속성 값을 .attr 사용하거나 하나를 지정하여 값을 얻을 수 있습니다.

    .ID 유효한 JQuery와 함수가 아니다. 당신은 액세스에 .attr () 함수를 사용할 필요가 속성 요소를 가지고있다. 당신은 두 개의 매개 변수를 지정하여 모두 변화 () 속성 값을 .attr 사용하거나 하나를 지정하여 값을 얻을 수 있습니다.

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

  7. 7.당신이 요소의 ID를 얻고 싶은 경우에,의 (이 경우 클릭 이벤트에서) 이벤트가 그 다음은 일을 할 것, 특정 요소에 발사 된 클래스 선택에 의해 가정 해 봅시다 :

    당신이 요소의 ID를 얻고 싶은 경우에,의 (이 경우 클릭 이벤트에서) 이벤트가 그 다음은 일을 할 것, 특정 요소에 발사 된 클래스 선택에 의해 가정 해 봅시다 :

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

  8. 8.$ ( '# 테스트'). ATTR ( 'ID') 당신의 예에서 :

    $ ( '# 테스트'). ATTR ( 'ID') 당신의 예에서 :

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

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

  9. 9.음, 해결되지 않았으므로 및 JQuery와 프로토 타입의의 확장 내 자신의 솔루션을 제안하고자하는 것 같다. 나는 window.jQuery를 들어, jQuery 라이브러리 후로드 도우미 파일에 따라서 확인이를 넣어

    음, 해결되지 않았으므로 및 JQuery와 프로토 타입의의 확장 내 자신의 솔루션을 제안하고자하는 것 같다. 나는 window.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 라이브러리에 포함을 얻기에 시작입니다.

    반환 단일 문자열 값이나 문자열 값의 배열 중 하나. 문자열 값의 어레이는 다중 요소 선택기 사용 된 이벤트이다.

  10. 10.당신은 단순히 id를 얻을 object.id 사용할 수 있도록 $ ( '# 테스트'), JQuery와 객체를 반환

    당신은 단순히 id를 얻을 object.id 사용할 수 있도록 $ ( '# 테스트'), JQuery와 객체를 반환

    당신은 $ ( '# 테스트')를 사용해야합니다. 요소의 당신의 필수 ID를 반환 ATTR ( '아이디'),

    다음과 같이도 수행 할 수 있습니다

    $ ( '# 테스트'). 수 (0) document.getElementById를 ( '테스트')와 동일하다 .ID. ID를

  11. 11.어쩌면이 스레드를 찾을 다른 사람에 유용합니다. 이미 jQuery를 사용하는 경우 아래의 코드는 작동합니다. 이 함수는 항상 식별자를 반환한다. 요소는 식별자가없는 경우에는 기능 식별자를 생성하고,이 요소를 추가.

    어쩌면이 스레드를 찾을 다른 사람에 유용합니다. 이미 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. 12.

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

    위의 코드를 사용하면 ID를 얻을 수 있습니다.

  13. 13.이것은 오래된 질문이지만, 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); }
});

    흥미롭게도, 요소는 DOM 요소, 다음의 경우 :

    element.id === $(element).id; // Is true!

  14. 14.ID가 속성이기 때문에, 당신은 ATTR 방법을 사용하여 얻을 수 있습니다.

    ID가 속성이기 때문에, 당신은 ATTR 방법을 사용하여 얻을 수 있습니다.

  15. 15.이것은 심지어 사용하여 자동으로 요소 ID, 클래스, 또는이 될 수 있습니다

    이것은 심지어 사용하여 자동으로 요소 ID, 클래스, 또는이 될 수 있습니다

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

  16. 16.

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

  17. 17.중요 : jQuery로 새로운 객체를 생성하고 이벤트를 바인딩하는 경우, 당신은 소품 사용해야하지 ATTR이 같은 :

    중요 : jQuery로 새로운 객체를 생성하고 이벤트를 바인딩하는 경우, 당신은 소품 사용해야하지 ATTR이 같은 :

    $ ( "

    ", {ID : "yourId", 클래스 : "yourClass"HTML " "}). () {알림 기능 (예 "를 클릭"에 ($ (이) .prop ( "ID"));}) appendTo ( "# 뭔가.");

  18. 18.이것은 결국 문제를 해결합니다 :

    이것은 결국 문제를 해결합니다 :

    한 페이지에 많은 버튼이 있고 자신의 ID에 따라 (안 아약스 또는) jQuery를 아약스로 중 하나를 변경하고 싶은 말은 할 수 있습니다.

    또한 (승인 및 목적 등을 위해, 양식 용) 버튼의 많은 다른 유형이 있고, 당신이 jQuery를 만 버튼 "처럼"처리 할 말 있습니다.

    여기에 작업하는 코드는 다음과 같습니다 JQuery와, 클래스 .CLS - hlpb의 경우에만 버튼을 처리합니다 이 클릭 된 버튼의 id를 취할 것 와 아약스에서 제공되는 데이터에 따라 변경됩니다.

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

    코드는 W3 스쿨에서 가져온 변경되었습니다.

  19. 19.그것은 OP 대답하지 않지만, 다른 사람에게 흥미로운 일이 될 수있다 :이 경우에 .ID 필드에 액세스 할 수 있습니다 :

    그것은 OP 대답하지 않지만, 다른 사람에게 흥미로운 일이 될 수있다 :이 경우에 .ID 필드에 액세스 할 수 있습니다 :

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

    20. from https://stackoverflow.com/questions/3239598/how-can-i-get-the-id-of-an-element-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 그것의 jQuery CSTE 연구진 및 호버를 사용할 수 있습니까?  (0) 2020.10.03
[JQUERY] 어떻게 jQuery를 사용하여 사업부의 innerHTML을 교체하는?  (0) 2020.10.03
[JQUERY] 있는 jqGrid 페이징 질문  (0) 2020.10.03
[JQUERY] 어떻게 난 단지 코너 테두리를 표시 할 수 있습니다?  (0) 2020.10.03
[JQUERY] 크롬에서 옵션을 선택 요소에 이벤트를 클릭  (0) 2020.10.03
,

티스토리툴바