name取得 - 我如何使用jQuery獲取元素的ID?




jquery選擇器多條件 (12)

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

為什麼沒有上述工作,我該怎麼做?


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選擇器並返回一個數組()的結果不是由其默認功能的單個元素

在jQuery中DOM選擇器的替代方法是

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

它和.attr()$('#test').prop('foo')不同.attr() $('#test').prop('foo')獲取指定的DOM foo屬性,而$('#test').attr('foo')獲取指定的HTML foo屬性,你可以here找到更多關於差異的細節。


$('#test').attr('id')在你的例子中:

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

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

$('selector').attr('id')將返回第一個匹配元素的id。 Reference

如果您的匹配集合包含多個元素,則可以使用常規.each iterator返回包含每個id的數組:

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

或者,如果你願意得到一點點砂礫,你可以避開包裝並使用.map shortcut

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

.id不是有效的jquery函數。 您需要使用.attr()函數來訪問元素擁有的屬性。 您可以使用.attr()通過指定兩個參數來更改屬性值,或者通過指定值來獲取該值。

Reference


也許對找到這個線程的其他人有用。 下面的代碼僅適用於已經使用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();

以上答案很好,但隨著jquery的發展..所以你也可以這樣做:

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

好吧,似乎還沒有解決方案,並希望提出自己的解決方案,它是JQuery原型的擴展。 我把它放在一個在JQuery庫之後加載的Helper文件中,因此檢查了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庫中。

返回單個字符串值或字符串值數組。 字符串值數組,用於使用多元素選擇器的事件。


如果你想得到一個元素的ID,讓我們說一個類選擇器,當一個事件(在這種情況下,點擊事件)被觸發到該特定元素上,那麼下面的工作將完成:

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

這將最終解決您的問題:

可以說你在一個頁面上有很多按鈕,並且你想用jQuery Ajax(或者不是ajax)來改變它們中的一個,這取決於它們的ID。

也可以說,你有許多不同類型的按鈕(用於表單,用於批准和用於類似目的),並且你希望jQuery只處理“like”按鈕。

這裡有一個正在工作的代碼:jQuery將只處理類為.cls-hlpb的按鈕,它將採用被點擊的按鈕的id,並根據來自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被採取並且改變了。


這是一個古老的問題, 但截至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!

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

使用上面的代碼你可以得到id。


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

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

一些檢查代碼當然需要,但很容易實現!





jquery-selectors