Response title
This is preview!
Context and selector syntax
in Using jQuery
•
13 years ago
Hi everyone! First post.
I'm using jQuery to modify an element I'm creating, like so:
rowhtml = buildARow(parameters); //returns something like "<tr class="foo hidden"><td class="firstcol" ... </tr>"
jRowhtml = $(rowhtml);
$(".firstcol", jRowhtml).text(" whatever");
This is a simple example but you see what I'm doing.
I'm now trying to do something like
$(".foo .secondcol", jRowhtml).text(" whatever ");
which isn't working, I assume because tr is the top level node of the context and selectors don't operate on the top level node. It works with something like
if (jRowhtml.hasClass("foo")) {$(".secondcol", jRowhtml).text(" whatever "); } but i wondered if there was a nicer-looking way to write that in one selector.
Second question: while I was reading some other threads on this topic, I found myself on a website where someone said that $("#somedivid td") would be a less efficient call than $("td", $("#somedivid")) because the first selector would select all td and then select only children of #somedivid. Is that true? And if so, isn't that the worst possible way to implement that selection?
Third question: while looking for a way to modify the css on the DOM directly, I ran across a jQuery patch from about three years ago that enabled selection by style. I can't find anything more recent than that and I wondered if no one else ever wanted to use jQuery to find, for instance, all elements with the color green. I have a specific goal in mind that most people probably don't care about, but it seems like it would be pretty useful for styling in general. Instead of only changing node styles one at a time you could also specify, "I want all white elements to be light green", etc. Obviously it would have to be able to operate on root style sheets vs. computed styles or it would be really inefficient.
I'm using jQuery to modify an element I'm creating, like so:
rowhtml = buildARow(parameters); //returns something like "<tr class="foo hidden"><td class="firstcol" ... </tr>"
jRowhtml = $(rowhtml);
$(".firstcol", jRowhtml).text(" whatever");
This is a simple example but you see what I'm doing.
I'm now trying to do something like
$(".foo .secondcol", jRowhtml).text(" whatever ");
which isn't working, I assume because tr is the top level node of the context and selectors don't operate on the top level node. It works with something like
if (jRowhtml.hasClass("foo")) {$(".secondcol", jRowhtml).text(" whatever "); } but i wondered if there was a nicer-looking way to write that in one selector.
Second question: while I was reading some other threads on this topic, I found myself on a website where someone said that $("#somedivid td") would be a less efficient call than $("td", $("#somedivid")) because the first selector would select all td and then select only children of #somedivid. Is that true? And if so, isn't that the worst possible way to implement that selection?
Third question: while looking for a way to modify the css on the DOM directly, I ran across a jQuery patch from about three years ago that enabled selection by style. I can't find anything more recent than that and I wondered if no one else ever wanted to use jQuery to find, for instance, all elements with the color green. I have a specific goal in mind that most people probably don't care about, but it seems like it would be pretty useful for styling in general. Instead of only changing node styles one at a time you could also specify, "I want all white elements to be light green", etc. Obviously it would have to be able to operate on root style sheets vs. computed styles or it would be really inefficient.
1