Asked  7 Months ago    Answers:  5   Viewed   32 times

How to mix variables with selectors?

I have ID variable.

I want to select image with this id from div #one.

jQuery('#one img .id') is the selector. I've tried $('#one img .'+id) but doesn't work.



Edit: Based on your comment below, you would use this:

$('#one img.'+id)

In your question you have a space between img and the .class, I've simply removed that so you get img.className or img.'+className

With the introduction of template literals in ECMAScript 2015, you can also do

$(`#one img.${id}`)
Tuesday, June 1, 2021
answered 7 Months ago

You can do:






as you prefer.

So yes you can specify a selector that has to match ID and class (and potentially tag name and anything else you want to throw in).

Thursday, June 3, 2021
answered 6 Months ago

is just going to look for a div with class="outer inner", is that correct?

No, '.outer .inner' will look for all elements with the .inner class that also have an element with the .outer class as an ancestor. '.outer.inner' (no space) would give the results you're thinking of.

'.outer > .inner' will look for immediate children of an element with the .outer class for elements with the .inner class.

Both '.outer .inner' and '.outer > .inner' should work for your example, although the selectors are fundamentally different and you should be wary of this.

Wednesday, July 28, 2021
answered 4 Months ago

The current accepted answer is not consistent with tests across many browsers comparing :first and :eq(0) to .first() and .eq(0).

For the current major desktop browsers:
$('foo').first() is almost four times faster than $('foo:first')

If you want to inspect the methodology, here are the tests and their current results.

Wednesday, August 4, 2021
answered 4 Months ago

Sometimes, jQuery is the wrong way...

You shouldn't use jQuery unless it's offers a legitimate advantage. Often times using standard JavaScript will give you enormous performance advantages. With your situation, you could do something like the following:

var i,
    tags = document.getElementById("content").getElementsByTagName("*"),
    total = tags.length;
for ( i = 0; i < total; i++ ) {
  tags[i].style.width = '100%';

Online Demo:

That being said, the jQuery method is pretty simple as well.


This will run down into each level of #content, affecting all elements.

Online Demo:

Performance Differences

Using to compare the peformance difference here we can see the magnitude of speed raw JavaScript has over the jQuery alternative. In one test JavaScript was able to complete 300k operations in the time it took jQuery to complete 20k.

Test Now:

But, Why JavaScript?

Ultimately the question of whether jQuery or Raw JavaScript is better is a red-herring, distracting from the real question - why use scripting at all? If you detect a mobile browser, load a new stylesheet containing mobile rules:

#content * { width:100% }
Friday, August 13, 2021
Do Tog
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :