14

If my original function was:

document.getElementsByClassName('blah')[9].innerHTML = 'blah';

...how would I change that so I get that same item in jquery? I have this, but when I put '[9]' at the end it doesnt work:

$(data).find('.blah')[9].html();

It I leave the [9] out, it only gets the first item whose class name is 'blah', and I want it to get the 10th item.

Alex
  • 1,035
  • 3
  • 16
  • 31

8 Answers8

28

The equivalent of

document.getElementsByClassName('blah')[9].innerHTML = 'blah';

is to use the :eq pseudo-selector:

$(".blah:eq(9)").html('blah');

or the eq function:

$(".blah").eq(9).html('blah');

(...and then the html function to set the inner HTML.)

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 3
    Prefer the `.eq()` as the `:eq()` pseudo class is non-standard and will thus trigger sizzle (jQuery's selector engine) instead. This is slower than the native `querySelectorAll()` which is used whenever possible – rodneyrehm Mar 30 '13 at 13:55
  • 1
    @rodneyrehm: Yes. In the *extremely* rare cases where it matters. I prefer the function version anyway, truth be told. And yes, there *is* a marginal speed benefit (again, for those extremely rare cases): http://jsperf.com/eq-sel-vs-function – T.J. Crowder Mar 30 '13 at 14:09
  • 1
    @T.J.Crowder: +1 and just to add for OPs and future user's benefit why `$(data).find('.blah')[9].html();` didn't work as I didn't see that addressed directly. `@Alex:` When using `[9]` you are getting the HTML element reference not a jQuery wrapped object. Hence you cannot call any jQuery methods on it. That is why you would have to use `.innerHTML` instead: `$(data).find('.blah')[9].innerHtml;`. Which incidentally is very fast as well (about same as `.eq()`) when being pedantic about performance to that level: http://jsperf.com/eq-sel-vs-function/2 – Nope Mar 30 '13 at 14:44
2

See what you are looking for is :eq():

$('.blah').eq(9).html('blah');

because :eq() is 0 indexed,so :eq(9) will find the item at 10th index.

.eq() jQuery doc

There is :nth-child() function too:

$('.blah:nth-child(10)').html('blah');

because :nth-child() is 1 indexed so you have to give place 10th position there.

:nth-child() jQuery doc

from the docs:

Because jQuery's implementation of :nth- selectors is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as :eq() or :even jQuery follows JavaScript's "0-indexed" counting. Given a single containing two

  • s, $('li:nth-child(1)') selects the first
  • while $('li:eq(1)') selects the second.
    • Community
    • 1
    • 1
    Jai
    • 74,255
    • 12
    • 74
    • 103
    1

    try the following

    $('.blah').eq(9).html('blah');
    Ankush Jain
    • 1,532
    • 1
    • 15
    • 24
    1

    Try this

    $('.blah').eq(9).html('blah');
    Suresh Atta
    • 120,458
    • 37
    • 198
    • 307
    1

    You should also just be able to use jQuery's get() method:

    $('.blah').get(9)

    jQuery objects also function as indexed arrays as returned elements, so this should also work:

    $('.blah')[9]
    supershnee
    • 1,226
    • 1
    • 14
    • 13
    0

    Another answer could be:

    $($(data).find('.blah')[9]).html();

    When you use [9] it returns a DOM object which doesn't know what function html() is but without [9] it returns a jQuery Object which the html() function is apart of.

    Ahmad Amin
    • 191
    • 2
    • 12
    • Using `eq(9)` instead of `[9]` like this: `$(data).find('.blah').eq(9).html()` saves you from having to apply another jQuery wrapper around resulting DOM reference as `eq()` returns a jQuery wrapped object already. – Nope Mar 30 '13 at 14:36
    0

    Try this

    $(".blah:eq(9)").html('blah');
    Tamil Selvan C
    • 19,913
    • 12
    • 49
    • 70
    0
    $('.blah')[9].innerHTML="BLAH";

    This should solve your problem

    Rohan210
    • 825
    • 2
    • 14
    • 35