jQuery: Is there any way to select multiple elements using an array selector?

Question

Is it possible to select multiple elements using an array selector?

If so, what is the best way to do it? In my project, I need to use only array selectors.

This is my sample code:

<ul>
    <li>1<li>
    <li>2<li>
    <li>3<li>
    <li>4<li>
    <li>5<li>
</ul>
<a href="#">select</a>

$('a').click(function(){
    var element = $('ul').find('li')[0]; // Instead is it possible $('ul').find('li')[0,3,4]? I know we can select finding each alone. But is there any shortcut?
    $(element).css({border:'1px solid red'});
})

Just a little side note: since it's a 0-based index, the 5 in your [0,3,5] would mean that there are 6 elements instead of 5. — sp00m
– sp00m, Commented May 4, 2012 at 9:15
Is it possible to set a class name to the elements, so you can get them by $('.classname') — bitoshi.n
– bitoshi.n, Commented May 4, 2012 at 9:18
nope, it will vary according to the sectors and pages. thanks — 3gwebtrain
– 3gwebtrain, Commented May 4, 2012 at 9:20
@3gwebtrain You can add a custom method to the JS Array object. See my answer to get more details. — sp00m
– sp00m, Commented May 4, 2012 at 9:31

Robin Castlin · Accepted Answer · 2012-05-04 09:55:59Z

7

This would give desired result. Simply filter by index() and use inArray().

var arr = [0, 3, 5];
$('ul li').each(function() {
    if ($.inArray($(this).index(), arr) < 0)
        return;
    // Code here!
    $(this).css('border', '1px solid red');
});

Basicly all the <li> are run through the each() and then I loop to check if given .index() is in given array. If they don't exist ( $.inArray() == -1 ) then I do a return; to skip execution.

edited May 4, 2012 at 9:55

answered May 4, 2012 at 9:17

Robin Castlin

11k1 gold badge30 silver badges44 bronze badges

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

Comments

Stefan · Accepted Answer · 2012-05-04 09:28:31Z

1

One option is to use filter;

var indexArray = [1,3,4];
$('ul li').filter(function(index) {
    return jQuery.inArray($(this).index(), indexArray) > -1;
});

Also using $.inArray and index(). View demo.

answered May 4, 2012 at 9:28

Stefan

5,6624 gold badges28 silver badges32 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2012-05-04 14:52:35Z

1

Here is a sexy way to do it: add a custom method to the JavaScript Array object as suggested in another answer.

Array.prototype.filter = function(indexes) {
    var array = new Array();
    for(var i=0; i<indexes.length; i++) {
        array.push(this[indexes[i]]);
    }
    return array;
};

To call it:

$('ul').find('li').filter([0,3,4]).anything();

Custom generic shortcut as you wished :)

edited May 4, 2012 at 14:52

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered May 4, 2012 at 9:27

sp00m

49k31 gold badges152 silver badges263 bronze badges

Comments

Ranganadh Paramkusam · Accepted Answer · 2012-05-04 09:23:12Z

0

You can use forEach of array also

arr = "013".split("");
arr.forEach(function(a,b){
    var element = $('li')[a]; 
    console.log(element);
    $(element).css({border:'1px solid red'});
});

Here's Fiddle

answered May 4, 2012 at 9:23

Ranganadh Paramkusam

4,3882 gold badges24 silver badges33 bronze badges

Comments

Sebastian · Accepted Answer · 2012-05-04 09:26:14Z

0

loop it

$('a').click(function() {
    var element = $('ul').children('li');
    var count = 0;
    for (x in element) {
        count++;
        if ((count == 0) || (count == 3) || (count == 5))
            x.css({ border: '1px solid red' });
    }
});

answered May 4, 2012 at 9:26

Sebastian

1,2364 gold badges19 silver badges35 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2012-05-04 14:50:07Z

0

Maybe this will work (but not so good with performance):

$('ul li:nth-child(0),ul li:nth-child(2)');

Or this:

$('ul li:eq(0),ul li:eq(2)');

edited May 4, 2012 at 14:50

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered May 4, 2012 at 9:19

Vytautas

3,5391 gold badge30 silver badges43 bronze badges

Collectives™ on Stack Overflow

jQuery: Is there any way to select multiple elements using an array selector?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related