Multiple objects in jquery selector

Asked

Viewed 3,522 times

4

For organization and performance I usually use several selectors together to perform a jquery method. For example:

$("#bola, #casa, #arvore").css("background-color", "blue");

In this example it works because the selector is a string.

But when using objects I don’t know how to make this join.

New scenario:

var bola = $("#bola");
var casa = $("#casa");
var arvore = $("#arvore");

$(bola, casa, arvore).css("background-color", "blue");

In this case only the bottom of "ball" is painted.

Or by concatenating with a comma:

$(bola+ ","+ casa + "," + arvore).css("background-color", "blue");

In this case neither is painted, as was expected.

So I was wondering if there’s any way to put these objects together by comma or in any way that stay on the same dial.

Test fiddle: http://jsfiddle.net/nsMw3/

NOTE: It is not worth putting that var items = $("#ball, #house"), because I use objects that are brought much more complex, and define them one by one.

jquery

2 answers

4


You can use the method add() to combine objects in a set

var bola = $("#bola");
var casa = $("#casa");

$(bola).add(casa).css("background-color", "blue");

Jsfiddle

Option

jQuery does not allow adding multiple elements at once to a jQuery object, one option would be to add multiple pure DOM elements to an array:

var bola = $('#bola'),
    casa = $('#casa'),
    arvore = $('#arvore');

// array de elementos DOM 
$( [bola[0], casa[0], arvore[0]] ).css("background-color", "blue");

In doing bola[0] you are accessing the DOM element div#bola

Jsfiddle 2

  • 2

    +1 The good of the method add is that it preserves the stack: http://jsfiddle.net/nsMw3/2/

  • Killer solution! + 1

  • In case id does not need to pass as var, only the node element ID and there is no need to pass INDEX position, so you cannot repeat ID’s and it is dispensable to pass the index.

  • 1

    @abfurlan this array solution with the [0] I think is the maximum that can be reached in terms of readability, organization and performance. Thank you!

  • 1

    @Joaopaulo cool, tb now discovered this way of doing and found interesting post, whenever I needed used with add

3

For this use the method .merge()1

var bola = $("#bola");
var casa = $("#casa");

$.merge(bola, casa).css("background-color", "blue");

I’m adding the comment code I put in:

To use with two or more Ids: HTML:

<div id="bola">bola</div>
<div id="casa">casa</div>
<div id="rodape">rodape</div>
<div id="aa">rodape</div>

JS:

$([bola, casa, rodape, aa]).css("background-color", "blue");

This way you don’t need to declare the ids in vars and your code gets cleaner.

  • Ronny, it was marked as correct, but I tested it with 3 elements and it didn’t work. I edited my question to make clear my need for multiple elements and not just two.

  • @Joaopaulo Talvez $.merge(bola, casa, arvore) doesn’t work, but how about $.merge($.merge(bola, casa), arvore)? (Note: according to the linked documentation, the method merge modifies the first element - so that if you need to use it in any other operation, do not use this method)

  • The main intention is to do this in a way that is readable and easy to understand for maintenance. At first several merges would mess up a lot. I will keep searching, but if I don’t find anything better I will mark this answer because it already helps and adds knowledge.

  • Friend, take some time to see the documentation, it helps a lot. Now look at my example, look what magic, I don’t even need to declare variables, just read the documentation...: http://jsfiddle.net/nsMw3/4/

  • I’m searching the documentation since I asked the question. Very cool your example, but it uses ids. As I mentioned, in my actual case of use objects are obtained in a more complex way. In fact I think I will not have how to do organized as I expect, separating in commas in a single selector, but thanks for the tips and response.

  • And anyway, refer to the elements directly by id - unused document.getElementById - is not considered a good practice. That answer on Soen gives some reasons for this.

  • @mgibsonbr you are basing on a response of 2011, could point me 1 problem resulting from the same? :)

  • @Ronnyamarante The answer is from 2011, but the functionality in question is much older. I found the arguments of the answer convincing, in particular the issue of global namespace pollution. But this is a matter of opinion, I can not give you an objective reason. In linked discussion in response there are also several conflicting opinions (it was not clear to me if this feature was incorporated into HTML5, if it was only 'quirks mode", or if it was deleted).

  • @mgibsonbr is incorporated yes, and I found no reason, if you find me let me know. ;)

  • @mgibsonbr try this test: var casa = "a";&#xA;alert($([casa])) soon if I do var casa = document.getElementById("casa") it will read the variable house or pick up the element directly?

  • @Ronnyamarante Abri a separate question to address this. There is no point in arguing with you, as I do not have enough practical experience to support my opinions. If you want to give an answer there and/or see what others write about it, feel free. P.S. I don’t understand the question - if you define something with var, the definition is what counts; only if not exist nothing with the name casa is that the element with id will be considered.

Show 6 more comments

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.