Jquery按钮数组

Jquery button Array

本文关键字:数组 按钮 Jquery      更新时间:2023-09-26

我正在写一段代码,它将显示所有jquery按钮的标签class="Short"

我使用以下代码:-

$('.Short').button();
var all_short_btns = $(".Short");
for(i=0; i< all_short_btns.length; i++){
   alert(all_short_btns[i].button( "option", "label" ));
}
Html是:

<button class="Short">Label1</button>
<button class="Short">Label2</button>
<button class="Short">Label3</button>
<button class="Short">Label4</button>
<button class="Short">Label5</button>
<button class="Short">Label6</button>

我得到错误:

Uncaught TypeError: object#没有方法'button'

我的问题是如何为每个按钮元素获得标签?

您使用了错误的方法,使用.eq(i)获得特定项目,然后通过调用.html()获得文本。

jsFiddle

var all_short_btns = $(".Short");
for(i=0; i< all_short_btns.length; i++){
    alert(all_short_btns.eq(i).html());
}

或者你可以使用$.each(),但它比本地for循环慢得多。

var all_short_btns = $(".Short");
$.each(all_short_buttons, function (i, item) {
    alert(item.html());
});

更新

由于OP使用jQuery UI .html()将打印出自动生成的<span>并包装内容。错误正在发生,因为你正在使用[i],它得到原始JavaScript对象时,我们需要的jQuery对象。.eq()获取该索引处的jQuery对象

jsFiddle

all_short_btns.eq(i).button("option", "label")

这可能对你有帮助:

$(".short").each(function(){
    alert($(this).text());
})

$(".short").each(function(){
    alert($(this).html());
})

您可以使用innerText属性设置或检索对象的开始和结束标记之间的文本。

所以试试这个

var all_short_btns = $(".Short");
for(i=0; i< all_short_btns.length; i++){
   alert(all_short_btns[i].innerText);
}

或者你也可以使用eq(i)来获取它。

for(i=0; i< all_short_btns.length; i++){
   alert(all_short_btns.eq(i).html());
}

JS提琴示例

谢谢大家,我发现这也是工作:-

alert(all_short_btns.eq(i).button( "option", "label" ));