select specific tr and specific td within selected tr - javascript

I have been able to select the specific rows that I wanted but I can't select specific td from those tr.
I used this to select rows:
$('#time-slot tr:not(:first, :last)')
then within those selected rows I was trying to ignore the first and the last td but it is not working. I used similar approach as above
$('#time-slot tr:not(:first, :last) td:not(:first, :last)')
Any ideas how should I approach this problem. Btw I am trying to click and drag the mouse to paint the cells with user defined color.

I prefer using less of a string selector and more of the jQuery methods, as well as using the :first-child and :last-child selectors for your problem:
$("#time-slot").find("tr").not(":first-child, :last-child").find("td").not(":first-child, :last-child").addClass("active");
http://jsfiddle.net/7b4Ms/
Depending on what you are expecting, which you haven't explained very well, this may or may not be what you want. What this does is select all tr elements that are not the first and last. Inside of those matched tr elements, it selects all td elements that are not first and last. So basically, it doesn't select the outside ring of cells in the table.

Totally agree with Ian, just I prefer to use .children() instead of .find(). Because it can make a problem if you have nested tables.
$("#time-slot").find("tr").not(":first-child, :last-child").find("td").not(":first-child, :last-child").addClass("active");
changes to:
$("#time-slot").children("tr").not(":first-child, :last-child").children("td").not(":first-child, :last-child").addClass("active");

Try this (uses css selectors only):
$("#time-slot tr:not(:first,:last) td:not(:first-child,:last-child)").addClass("active");
Sample

Related

What does this code means.?

I was checking out a project where this line have been used in jquery script. I don't know why this is used. Can anyone please help me why this code has been used? I can share whole function if you need.
$("#table_data").find("tr:not(:first)").remove();
Let's understand statement step by step
$("#table_data").find("tr:not(:first)").remove();
$("#table_data")
It finds the table with id (table_data)
$("#table_data").find()
this will find the elements on the basis of selector here as selector is "tr:not(:first)" so it will find all the tr except first one. Finally there is .remove() that will remove the selected rows.
So the complete statement will remove all the rows except first one
Inside of #table_data, it searches for all trs that are not the first children of their container (that is, for every container, it selects all trs except the first), and then removes them from the container.
It selects all elements that do not match the given selector
here is the official documentation
so what it does is, it find elements in a table that are not first in a row, and removes them.

:nth-child() not work on li added with foraeach data-bind

Im making a single page app on codepen.io (http://codepen.io/ntibbs/pen/ZbPPBm?editors=101) using knockout.js and jquery and while trying to figure out a way to select individual <li> elements that are added to my page using a foreach binding I noticed I can not use :nth-child() to do this. All the elements are considered :nth-child(1), not sure why its doing that. Are there any ways I could select an individual <li> element ?
The n in :nth-child() represents the depth, not the order. So :nth-child(1) selects every element that is the first child of its parent.
I'm not sure under what conditions you're trying to select a particular element, but I'll give you some options.
If each element already has a unique identifier, use that.
If you are already iterating through the set of elements, use logic in your loop to get the one you want.
If you can give me some more info on that, I can edit this accordingly.

jQuery - Object + nth-child

Trying to get the first cell in a row by using first-child or nth-child, but the syntax isn't playing nice. This is what I'm trying and it isn't working:
....
sections[key][2][sections[key][2].length-1] //Table Row
$(sections[key][2][sections[key][2].length-1]+":first-child") //Should be first cell of row
....
Instead it returns the entire document...
Your selector:
$(sections[key][2][sections[key][2].length-1]+":first-child")
is attempting to concatenate a JavaScript object with a string, which will result in (something similar) [object HTMLTableRowElement]:first-child which, obviously, is not going to produce a jQuery object, or a DOM node.
Given that (you say) $(sections[key][2][sections[key][2].length-1] is the tr element (though why you're using that notation within a jQuery selector is a mystery to me), I'd suggest:
$(sections[key][2][sections[key][2].length-1]).find('td:first-child');
JS Fiddle demo.
Note the use of the td with the :first-child pseudo-class, in order to prevent selecting the first-child of all subsequent elements.
However, to get the first cell of all table-rows (using jQuery's more understandable notation) I'd suggest:
$('table tr td:first-child')
JS Fiddle demo.
Or, to use :nth-child() to get an arbitrarily-numbered td:
$('table tr td:nth-child(2)')
JS Fiddle demo.
Should be:
$(sections[key][2][sections[key][2].length-1]+" td:first-child")
If you just want to return the first child regardless, why don't you do:
sections[key][2][sections[key][2].length-1].firstChild
Do keep in mind that selecting via jQuery what you can get very easily via DOM is just slowing down your code for no good reason.

Difference between $('#tabs a') and $('#tabs').find('a')

I have following structure
<ul id="tabs" class="nav nav-tabs">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
</ul>
Now I am operating on the anchor tag by following code and which is working fine.
$('#tabs a[href="#ddd"]').tab('show');
I am using pycharm which adds warning for the line by saying "Preface with ID selector". When I click it, pycharm changes to following
$('#tabs').find('a[href="#ddd"]').tab('show');
Both are working fine but I don't understand the difference.
What is the difference in both or more specifically what is difference between $('#tabs a[href="#ddd"]') and $('#tabs').find('a[href="#ddd"]')?
$("#tabs a") evaluates from right to left - which is the native direction of both Sizzle selector engine and querySelectorAll - i.e. first it finds all of the anchor elements in the page and then narrows it down to those under #tabs.
$("#tabs").find("a") evaluates - more intuitively - from left to right, i.e. first it finds #tabs, and then only the anchor elements under it.
Clearly the latter would yield better performance, but it would only be noticeable accumulatively; that is, if you run thousands of queries. Otherwise, the difference is negligible.
As stated in "Increase Specificity from Left to Right":
A little knowledge of jQuery’s selector engine is useful. It works
from the last selector first so, in older browsers, a query such as:
$("p#intro em");
loads every em element into an array. It then works up the parents of
each node and rejects those where p#intro cannot be found. The query
will be particularly inefficient if you have hundreds of em tags on
the page.
Depending on your document, the query can be optimized by retrieving
the best-qualified selector first. It can then be used as a starting
point for child selectors, e.g.
$("em", $("p#intro")); // or
$("p#intro").find("em");
But Test case says $("#tabs > a") would be fastest
The second one is MUCH quicker.
The reason being jQuery's selector enginge Sizzle, which traverses the selection from right to left, not vice versa.
This means that the selector
$('#tabs a[href="#ddd"]')
First queries the DOM document for a tag, which contains the attribute href set to #ddd. It then filteres out all of them, to get every one that is a <a> tag. At last, it traverses up the DOM tree for every node, trying to find a parent #tabs.
Imagine a site with 1.000 tags with href="#ddd", how tremendously slow that would be.
THEN.
The other variation pycharm suggest, is to first locate a element #tabs. This is super-quick, since jQuery can utilize the native browser method getElementById(). Having this node, it can traverse down to find all tags that are matching. By doing this, not all tags in the whole DOM-tree, needs to be checked. Only those which actually are in #tabs.
For further information, please check out this page in the documentation.
The effect is the same: Find anchors that have the value #ddd as href and are a descendant of #tabs. The difference lies in the way to achieve this.
The first solution finds the anchors and then checks if they are a descendant of #tabs.
The second solution finds #tabs and then finds the anchors. Which should be faster, of course.
.find() is better performance wise as compared to your first selector
$('#tabs a[href="#ddd"]').tab('show');
, that is why pycharm changes it to the selector using .find()
$('#tabs').find('a[href="#ddd"]').tab('show');
http://vaughnroyko.com/the-real-scoop-on-jquery-find-performance/
The difference is that find() allows you to filter on a set of elements based on a selection you've already made, returning and array of elements if that's the case.
$('#tabs').find('a[href=“#ddd”]');
And it's a more specific way of searching for an element because you are saying "hey, go to #tabs and find me all a[href=“#ddd”] in there" instead of you saying "hey, find me all this guys $('#tabs a[href=“#ddd”]') in all the code that i have."
While, in most cases, the performance is the only difference, the difference in approach can also affect the outcome of your code, depending on what selectors you are using.
For example, $("table").find("tr:even").addClass("even"); will add the "even" class to the every other row in each individual table that gets returned. So, if the "even" class makes the text in the rows bold and you have two tables, each with 3 rows, you would get the following result:
this is table one, row 1
this is table one, row 2
this is table one, row 3
this is table two, row 1
this is table two, row 2
this is table two, row 3
In both cases, the 1st and 3rd row of each table (i.e., the "even" rows . . . don't get me started on JQuery's even filter, selecting the odd rows . . .) are bolded.
On the other hand, $("table tr:even").addClass("even"); will add the "even" class to every other row in the entire group of rows from all tables combined.
this is table one, row 1
this is table one, row 2
this is table one, row 3
this is table two, row 1
this is table two, row 2
this is table two, row 3
In this situation, the the 1st and 3rd row of second table are actually the 4th and 6th rows of the entire group of <tr> elements, so they are treated as "odd". The 2nd row of the second table, however, is the 5th row of the entire collection and, thus, is treated as "even" and is bolded.

jQuery selector AND operator

This may sound like a simple question, but I just cannot seem to find an answer on google, probably because the search term will bring back quite a lot of irrelevance.
I would like a jQuery selector to select all odd table rows, that are not in <thead> and apply a css class to them all.
table.cp-ss-grid tr:odd
The above selector will bring back all odd rows in the table correctly, but will include the thead rows (on ie)
How would I in the selector do an and, i.e. something like:
table.cp-ss-grid tr:odd:not(thead)
the above doesn't work and still brings back the thead rows
Any ideas?
An AND selector for jQuery would be for example: .classA.classB
This would select elements which have classA and classB.
Why not do:
$('table.cp-ss-grid > tbody > tr:odd');
To explicitly select the body rows? All browsers will add a tbody for you if you don't have one.
if you use th to head and td to other rows ,
you can check that the have child of td,
.children('td')
table.cp-ss-grid tr:odd select all the odd rowb which will not include the header
if you want to specify a color of the header use :nth-child(n)

Categories

Resources