如何使用 jQuery 在 PAGE LOAD 上获取元素的 id答案

【问题标题】：How to get the id of an element ON PAGE LOAD using jQuery如何使用 jQuery 在 PAGE LOAD 上获取元素的 id
【发布时间】：2012-04-26 08:57:51
【问题描述】：

我只知道如何获取被点击元素的 id，就像这样：

$("button").click(function(){
console.log($(this).attr("id"));
}

但是我可以做些什么来获取网页加载的 id？看看这个。。

$("button").ready(function(){
console.log($(this).attr("id"));
}

它返回整个文档对象和这个..

$("button").load(function(){
console.log($(this).attr("id"));
}

什么都不做。

我想在加载时动态更改所有按钮的样式。

主项目比较复杂，我不想用js核心做，我想要jQuery选择器的简单，但是等价的js方法值得赞赏。

【问题讨论】：

只要考虑每个元素都有不同的风格。并且它们的样式与它们的 id 相关（它的背景位置）
仅供参考，以获取id 属性，您应该只使用this.id，因为它不必创建$() jQuery 对象。

标签： javascript jquery jquery-selectors jquery-events

【解决方案1】：

我想在加载时动态更改所有按钮的样式。

如果是这种情况，您只需在加载时将css 应用于button 选择器，而无需获取每个按钮的id。

$(function() {
    $("button").css("background-color", "#C00");
});

或者更好的是，将 css 样式放入一个类中，然后将一个类应用于所有按钮：

$(function() {
    $("button").addClass("red-bg");
});

如果您确实想在加载时获取每个按钮的 id，则需要使用数组来满足可能有多个按钮的事实：

var buttonIds = $("button").map(function() {
    return this.id;
}).get();

但是，这是一个相当没有意义的方法，因为您可以使用 each() 来遍历 button 选择器以访问每个单独的按钮元素。

【讨论】：

【解决方案2】：

您可以在 jquery 中获取所有按钮元素，然后在每个按钮元素上循环以更改其样式 - ：

$(function()
{
    var allButtons = $('button');
    $.each(allButtons,function(index,element)
    {
        $(element).css('width','100px');
    });
});

【讨论】：

【解决方案3】：

我想你正在寻找这个：

        $(document).ready(function () {
            $(":button").each(function () {
                console.log($(this).attr("id"));
            })
        });

【讨论】：