Apply selector to elements that have already been selected - javascript

I feel like I am asking something really dumb but perhaps it's not my day. If I have a selected element already, e.g:
let tables = $('table');
But now I want to apply another selector like .some-class on top of those tables, but without creating a new jQuery object like this
$('table.some-class')
How would I do it?

You need to use .filter() to adding filter to variable selector.
let tables = $('table');
tables = tables.filter('.some-class');
tables.css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>table</td>
</tr>
</table>
<table class="some-class">
<tr>
<td>table has .some-class</td>
</tr>
</table>

With the following code you would find all elements with class .some-class under the elements with tag name table.
let tables = $('table').find('.some-class');
Of course, it is just for the example, otherwise you can simply do:
let tables = $('table .some-class');
In your question it is not clear if you want children elements or just filter the elements. If you want the tables with a given class, you would do:
let tables = $('table').filter('.some-class');

Related

JavaScript cloneNode: SELECT keeping some undesirable binding

So, I have a simple table containing input elements and I need to dynamically add new rows to it.
One of the cells contains a SELECT element and a list of OPTIONS which are replicated with cloneNode().
The problem is: when I change any of the replicated SELECT elements, the index of the original SELECT also changes to that same value, like if there was some sort of "binding" left behind by the cloning process.
My table looks something like this:
<table>
<tr>
<th>Header</th>
</tr>
<tr>
<td>
<select>
<option>Options</option>
</select>
</td>
</tr>
</table>
The cloning routine is relatively complex, as I have to change cell IDs, element names and other things, but it boils down to something like this:
var table = document.querySelector('#table');
var rows = table.querySelectorAll('tr');
for (var x = 0; x < 5; x++)
{
row = rows[1].cloneNode(true);
// Changes everything that needs to be changed
table.appendChild(row);
}
Does anyone know what could be causing the original SELECT to be "bound" to the replicated ones?
Thanks in advance!
Thank you for all the comments! It turned out to be a simple mistake: I had an event added to the node via addEventListener() which was firing and updating the original SELECT to the same index of the replicated one.

Dynamically add css class to <tr> tag

I've three predefined class for <tr class="dynamicCSS"> tag. Those classes shall come one after another. Like -
<tr>
<td></td>
</tr>
<tr class="dynamicCSS"> //classA
<td></td>
</tr>
<tr class="dynamicCSS"> //classB
<td></td>
</tr>
<tr class="dynamicCSS"> //classC
<td></td>
</tr>
<tr class="dynamicCSS"> //repeat the above
<td></td>
</tr>
How can i do it?
You need some way of identifying the rows you want to add the classes to. (You can't use the same id value over and over again as you have in your question, so that won't work, but you could give them different id values.)
Once you have a way of identifying the tr elements in question, it's just a matter of setting the className property of those elements.
For instance, in your example you've identified the second, third, and fourth rows in the table. Assuming the table has the id "myTable", you can get the table's rows from its rows property, which is an HTMLCollection you can index into starting with 0:
var table = document.getElementById("myTable");
table.rows[1].className = "classA"; // second row
table.rows[2].className = "classB"; // third row
table.rows[3].className = "classC"; // fourth row
Note that that will wipe out any previous class the rows had. If you want to add a class, use += " classX" (note the space):
var table = document.getElementById("myTable");
table.rows[1].className += " classA"; // second row
table.rows[2].className += " classB"; // third row
table.rows[3].className += " classC"; // fourth row
In the above I've restricted myself to DOM functions that are present in just about all browsers, even older ones. On all major current browsers, rather than getElementById and the rows collection, you can use querySelector with any valid CSS selector expression that will identify the row you want to add a class to. You don't need it, necessarily, for what you've described, but it's good to know about it (and its cousin querySelectorAll, which returns a list of matching elements whereas querySelector returns just the first matching element).
Maybe you are looking for the nth:child css selector *1
For your example you can fiddle with it here:
http://jsfiddle.net/95N4E/
.myTable tr:nth-child(3n+1) {
background-color: gray;
}
.myTable tr:nth-child(3n+2) {
background-color: limegreen;
}
.myTable tr:nth-child(3n+3) {
background-color: steelblue;
}
And read how it works here:
*1 https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
A simple way to add classes to tr elements would be to use jQuery.addClass():
jQuery("tr").addClass("myClass");
The selector passed into the jQuery call can also select nth children, for example to add a class to every third tr element:
jQuery("tr:nth-child(3n)").addClass("classC");

How to display two tr's with its id in the same row by its id

I have a table with its tr tags. I want to display two tr tags side by side by its class. How can i able to do that using jquery.
<table>
<tr class='1'>
<td>First</td>
</tr>
<tr class='1'>
<td>second</td>
</tr>
<tr class='2'>
<td>third</td>
</tr>
<tr class='3'>
<td>fourth</td>
</tr>
<tr class='3'>
<td>fifth</td>
</tr>
</table>
Then in the output i want to display
First Second
Third
Fourth Fifth
I want to set those dynamically how can i do that using jquery or javascript. I want to use the class declared for the tr tag. I know want to use <td> tag for that.
Any help is appreciated
Here's the first way that came to mind:
var $tds = $("td"); // get all the tds
[].reverse.call($tds); // reverse the order so we can easily loop backwards
$tds.each(function() {
var $parentRow = $(this).parent(),
// find the first row with the same class that isn't this row
$firstTrSameClass = $("tr").filter("." +$parentRow.attr("class"))
.not($parentRow).first();
if ($firstTrSameClass.length > 0) { // if there is such a row
$firstTrSameClass.append(this); // move the td
$parentRow.remove(); // delete the original row
}
});
Demo: http://jsfiddle.net/pgcdq/
I can't really see a use case here but I guess the eaisiest would be to create new rows and move cells to them. You will find information on moving elements here:
How to move an element into another element?

jQuery class count on a certain table column number

I've been at this for a while and want to know the best way of achieving my goal if anyone has any ideas!
Example:
<table>
<tbody>
<tr>
<td>Hello</td>
<td>Hello (I want to check this column)</td>
</tr>
<tr>
<td>Hello 2</td>
<td class="active">Hello 2 (this column)</td>
</tr>
</tbody>
</table>
jQuery I've got so far (I'm traversing from a clicked element):
var length = $(self).closest("tbody").find("tr").find("td.active").length;
Obviously this gets all the active classes of td, when I only want the second column. I've tried:
var length = $(self).closest("tbody").find("tr").find("td:eq(1).active").length;
This does not work.
Any ideas?
If I'm understanding correctly, you want to get the table cells in the second column (not the first as indicated in the question) which have the class active on them. If that's the case, you can use the following:
var length = $(self).closest('tbody').find('tr').find('td:eq(1)').filter('.active').length;
http://jsfiddle.net/mikemccaughan/g6mnn/
I think your selector isn't doing what you expect it to. I would have expected what you're expecting, but check out this paragraph from the eq() documentation (emphasis mine):
Note that since JavaScript arrays use 0-based indexing, these
selectors reflect that fact. This is why $('.myclass:eq(1)') selects
the second element in the document with the class myclass, rather than
the first. In contrast, :nth-child(n) uses 1-based indexing to conform
to the CSS specification.
So you're going to want to use td:eq(1) without the class selector, then filter your results, and then count them:
var length = $(self).closest("tbody").find("td:eq(1)").filter(".active").length;
Hope that helps!

How to get inner tr tag using JQuery?

I am trying to grab documentnumber attribute from the tr tags inside tbody, and save it in an array.
Below is the html , I am working on
<tbody class="line-item-grid-body">
<tr data-group-sequence-number-field-index="" data-sequence-number-field-index="1" documentnumber="80" documentid="4133604" parent="80" class="line-item parent-line-item line-item-show reorderable-row droppable-element">
<td>
<table>
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr data-group-sequence-number-field-index="" data-sequence-number-field-index="1" documentnumber="80" documentid="4133604" parent="80" class="line-item parent-line-item line-item-show reorderable-row droppable-element">
</tr>
</tbody>
and this is what I did, which is not working. If I don't specify particular class then system also grabs inner tr tags, which I don't want
var docs = jQuery("#line-item-grid").find('tbody').find("tr[class='line-item parent-line-item line-item-show reorderable-row droppable-element']");
for (i=1;i<=docs.length;i++)
{
var tempValue = jQuery(docs[i]).attr('documentnumber');
alert(tempValue);
}
Any ideas?
There's several ways you could go about this. I would do the following....
var docs = $('.line-item-grid-body>tr');
Docpage: Child selector
Another option:
var docs = $('.line-item-grid-body').children('tr');
Bookmark and frequent this page ... Selectors - jQuery API
try this as your selector
$('tbody > tr','#line-item-grid');
Hmm i didn't test this (so check for typos), but off top of my head, i'd try something like this:
jQuery(".line-item-grid tbody > tr").each(function() {
alert($(this).attr('documentnumber');
});
You can define selectors one after another, pretty much same as in CSS.
Also check child selector (http://api.jquery.com/child-selector/) for selecting direct child elements.
Hope it helps

Categories