jQuery selector - code correctness question

Question

I'm new to jQuery. I'm trying to use this code:

var ThisTableWrapper = $('#switch1').parent().next();
var ThisTable = $(ThisTableWrapper > '.table-data');

But it doesn't seems to work.

What is the correct way to write that in one line?

I've tried something like this - but with no success

$( $('#switch1').parent().next();) > .table-data);

Any help will be much appreciated.

HTML HERE: html code

You should post the HTML code. No one can assume how your nested tags look like from a not working jacasript code, except some users with a huge reputation pool ;-) — DanielB, May 31 '11 at 09:08
I've updated your fiddle with some working pice of code. http://jsfiddle.net/CHc6u/41/ — DanielB, May 31 '11 at 10:49
It was just a code example for you guys. Quick one - why this small function of your stops working after 3rd or 4th change? — User, May 31 '11 at 11:00
because it only adds classes ;-) it should remove the "old" ones as well ;-) major bug I think ;-) — DanielB, May 31 '11 at 11:03
But it does work when the class number has increase - e.g from table.s1 to table.s2? Why is that? CSS selectors always give more power to higher number or last added? — User, May 31 '11 at 11:11
No, but the classes with the higher number are defined later in the CSS, so if applied, they override the previously applied styles. after selection all styles the table will look like `` and because `s4` is defined last, it will be applied. try to change the order in the css definition an you will see the last defined rule has the highest priority. — DanielB, May 31 '11 at 11:16
Here a [Fiddle](http://jsfiddle.net/CHc6u/42/) with fix for that ;-) — DanielB, May 31 '11 at 11:20
.attr('class', '') - that is very clever! I've always used .removeAttr('class') and than define new one. Thanks for explanation regarding CSS! — User, May 31 '11 at 12:09
@DanielB - do you know any simple way to save configuration made by jquery to cookie? So it would stay same next time you visit that page? — User, May 31 '11 at 13:05
http://stackoverflow.com/questions/1458724/how-to-set-unset-cookie-with-jquery or http://stackoverflow.com/questions/95213/can-jquery-read-write-cookies-to-a-browser — DanielB, May 31 '11 at 13:25

Felix Kling · Accepted Answer · 2011-05-31T09:13:40.943

jQuery selectors must always be strings, or other jQuery / DOM elements, but not a combination / concatenation of both.

The second line should be:

var ThisTable = ThisTableWrapper.children('.table-data');

Or in one line:

var ThisTable = $('#switch1').parent().next().children('.table-data');

The documentation provides a list of possible selectors and traversal methods.

As @DanielB points out in his comment, this is just to fix the syntax, it does not mean that the correct elements are selected. This depends on your actual HTML which you did not post.

JohnP · Answer 2 · 2011-05-31T09:16:31.847

Assuming you're just trying to use the child css selector

var ThisTableWrapper = $('#switch1').parent().next();
var ThisTable = ThisTableWrapper.children('.table-data');

If you want it in one line, just chain it

var ThisTable = $('#switch1').parent().next().children('.table-data');

http://api.jquery.com/children

I've edited the answer to use children() instead of find(). Use find() if you want to go more than one level deep (like in Inception!)

score 0 · Answer 3 · answered May 31 '11 at 09:10

0

You could try

var ThisTableWrapper = $('#switch1').parent().next().children('.table-data');

Unless the .table-data isn't a direct child then

var ThisTableWrapper = $('#switch1').parent().next().find('.table-data');

answered May 31 '11 at 09:10

LeeR

1,493
10
26

jQuery selector - code correctness question

3 Answers3