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

Answer 1

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!)

Answer 2

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.

Answer 3

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');