Jquery button Array

Question

I am writing a piece of code which will show button label of all jquery buttons having class="Short"

I am using the following code:-

$('.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 is:

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

I am getting error:

Uncaught TypeError: Object # has no method 'button'

My Question is how to get label for each button element ?

Thanks in advance.

Daniel Imms · Accepted Answer · 2013-03-24 11:03:27Z

2

You were using the wrong method, use .eq(i) to get the specific item and then get the text by calling .html().

jsFiddle

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

Alternatively you could use $.each() but it's quite a bit slower than the native for loop.

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

Update

Since the OP was using jQuery UI .html() would print out the <span> that is automatically generated and wraps the content. The error is occurring because you are using [i] which gets the raw JavaScript object when we need the jQuery object. .eq() gets the jQuery object at that index.

jsFiddle

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

edited Mar 24, 2013 at 11:03

answered Mar 24, 2013 at 10:29

Daniel Imms

50.6k19 gold badges157 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Felix Kling Over a year ago

The OP uses jQuery UI. Using .button( "option", "label" ) is perfectly fine.

Felix Kling Over a year ago

Despite this being accepted, I just noticed that .html is not a good solution here, since jQuery adds additional elements to the button element. See jsfiddle.net/fkling/YR6cA.

Kuntal Basu Over a year ago

Yes I agree but here no one had given answer with .button( "option", "label" ) instead of me. and I cannot accept my answer. But its true I came to know the .eq(i) trick from this answer. So I gave this a tick.

Daniel Imms Over a year ago

I updated my answer with the reason for this. FYI, try to use items.eq(i) instead of $(items[i]) as you did. The later does an extra unnecessary conversion.

Eli · Accepted Answer · 2013-03-24 10:34:06Z

2

This may help you:

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


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

edited Mar 24, 2013 at 10:34

Eli

14.9k5 gold badges61 silver badges77 bronze badges

answered Mar 24, 2013 at 10:31

Sri Tirupathi Raju

8395 silver badges14 bronze badges

1 Comment

Felix Kling Over a year ago

The OP is using jQuery UI. Using .button( "option", "label" ) is perfectly fine.

Sachin · Accepted Answer · 2013-03-24 10:56:03Z

2

You can use innerText property which Sets or retrieves the text between the start and end tags of the object.

So try this .

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

Alternatively you can also use eq(i) to get it.

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

JS Fiddle Example

edited Mar 24, 2013 at 10:56

answered Mar 24, 2013 at 10:32

Sachin

41.1k7 gold badges94 silver badges107 bronze badges

2 Comments

Felix Kling Over a year ago

The OP uses jQuery UI. Using .button( "option", "label" ) is perfectly fine, if called on a jQuery object of course. Note that .innerText is not supported in Firefox (it's .textContent there).

Sachin Over a year ago

Thanks @FelixKling I have updated my answer for that option as well

Kuntal Basu · Accepted Answer · 2013-03-24 10:34:28Z

0

Thanks all of you, I found this is also working:-

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

answered Mar 24, 2013 at 10:34

Kuntal Basu

8302 gold badges12 silver badges28 bronze badges

5 Comments

user2193789 Over a year ago

Your answer was given before you have identified. why you are not considering to accept them.

Felix Kling Over a year ago

@silentboy: Everyone else suggested to use .text or .html instead of .button( "option", "label" ), so it is not the same answer. And why do you assume the OP does not intend to accept one of the other answers? They still have to wait a couple of minutes before they can.

Kuntal Basu Over a year ago

I am not able to accept the answer after 10mints of the question is asked. Till then I need to wait. Ofcourse I shall accept one of the answers because of the answers given below I was able to find my way.

Kuntal Basu Over a year ago

@silentboy: With the help of these answers only I have Identified my answers. So I just want to share it. And see now after 10mints I have accepted the answer which seems best to me..

user2193789 Over a year ago

great, i think giving feedback is a good thing. +1 for your question

Collectives™ on Stack Overflow

Jquery button Array

4 Answers 4

Update

4 Comments

1 Comment

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Update

4 Comments

1 Comment

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related