Add class to element that doesn't have class - jQuery - javascript

In the table below only one td has class, another doesn't have class like:
<table id="bow-me">
<tr class="row-me">
<td class="show-me">Pet is Great</td>
<td>Pete is Greate</td>
</tr>
</table>
I tried something like:
if(!$("#bow-me tr td").hasClass("show-me")) {
$(this).addClass("know-me");
}
But this doesn't add the class know-me in my second td here.
I have attached the JSFiddle here
If I want to add Class to the second td only then how do I do?

Try attribute selector and :not() to get the <td> without any class
$('#bow-me tr td:not([class])').addClass('know-me');
Or if you want to specify which <td> like first or second, use :eq()
$('#bow-me tr td:eq(1)').addClass('know-me');
Doc reference
:not()
Attribute selectors
.eq()

You can use :eq() selector:
$('#bow-me tr.row-me td:eq(1)').addClass('know-me');
Updated Fiddle
or .eq()
$('#bow-me tr.row-me td').eq(1).addClass('know-me');
Updated Fiddle

the reason your code doesn't work is because
There are multiple td's found with your selector
$("#bow-me tr td")
You can't use the $(this) as a selector inside your if conditional statement. it has no valid reference as is.
Solution: you can cycle through the matched elements via each() function and then set up your conditional to check each one of the elements found - $(this) would work in this case
$("#bow-me tr td").each(function() {
if(! $(this).hasClass("show-me")) {
$(this).addClass("know-me");
}
});
check out the jsFiddle here
I gave this answer as an explaination as to why your approach does not work.
I prefer Anton's approach that uses the :not() pseudo selector.

Related

Remove particular class from all table rows

in which on particular tr elements i have a class "deleted_row" which should be remove from all tr elements which have that class. I gave a id, I think which can help me to do this.
Is anyone know any method to do above thing.
Thanks.
If I understand well you want to remove the class "deleted_row" to all elements which have that class. To do so, you need to select those elements and remove the class:
function removeClass() {
const rows = Array.from(document.querySelectorAll('tr.deleted_row'));
rows.forEach(row => {
row.classList.remove('deleted_row');
});
}
.deleted_row {
background-color: red;
}
<table>
<tr class="deleted_row"><td>Row</td><td>1</td></tr>
<tr class="deleted_row"><td>Row</td><td>2</td></tr>
</table>
<button onclick="removeClass()">Remove class</button>
As i can see from your question, You only want to remove particular class from all tr elements. I am assuming that, "deleted_row" class only exists in your tr element & you are assuming tbody id as your parent element. Below is jquery code for that.
$('#tbody').children().removeClass('deleted_row');
Note: It will remove "deleted_row" from all tr elements which contains that class, Not particuar tr elements.
Thanks.

Catch next/previous specific attribute using jquery

My html is
<table>
<tr><td>w</td><td data-id='6' class='point'>6</td></tr>
<tr><td>X</td><td data-id='8' class='point'>8</td></tr>
<tr><td>Y</td><td data-id='7' class='point'>7</td></tr>
<tr><td>Z</td><td data-id='10' class='point'>10</td></tr>
</table>
and js is
$('.point').click(function(){
alert($(".point").nextAll().attr('data-id:first'));
});
I want to get the value of previous or next data-id when I click any point class. How to solve this without using parent() and children(). My fiddle is Fiddle demo Thank you.
As per your requirement(do not use "closest"/parent/children/"find"), You can use .eq() along with .index() to achieve what you need.
Try,
var point = $('.point');
point.click(function(){
alert(point.eq(point.index(this) + 1).attr('data-id'));
});
DEMO
Firstly you need to use this to reference the clicked element. Then as the .point elements are not siblings nextAll() isn't going to work. Instead you need to use closest() to find the parent tr, go to the next tr, then find() the .point element within that. Try this:
$('.point').click(function(){
alert($(this).closest('tr').next('tr').find('.point').data('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>w</td><td data-id='6' class='point'>6</td></tr>
<tr><td>X</td><td data-id='8' class='point'>8</td></tr>
<tr><td>Y</td><td data-id='7' class='point'>7</td></tr>
<tr><td>Z</td><td data-id='10' class='point'>10</td></tr>
</table>

Getting child element of a child element of a parent with ID

I need to get to the child of the child of the child of an element with an id = "part1" with javascript. So essentially, I want to get to the 3rd row of the 3rd table of the span element but I can't seem to get it to work :(
<span id = "part1">
<table> </table>
<table> </table>
<table>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr> (get this row)
</table>
</span>
Non-jQuery solution
var span = document.getElementById('part1');
var row = span.getElementsByTagName('table')[2].childNodes[2];
jQuery solution
Using :eq selector:
var $row = $('#part1 > table:eq(2) > tr:eq(2)');
Using :nth-child selector:
var $row = $('#part1 > table:nth-child(3) > tr:nth-child(3)');
:eq and :nth-child selectors selects all elements that are the nth-child of their parent. However :eq follows "0-indexed" counting and nth-child follows "1-indexed".
Be aware that :eq and nth:child selectors work differently. In this case it would do the same because you only have table elements inside span#part1.
From jQuery documentation:
The :nth-child(n) pseudo-class is easily confused with :eq(n), even
though the two can result in dramatically different matched elements.
With :nth-child(n), all children are counted, regardless of what they
are, and the specified element is selected only if it matches the
selector attached to the pseudo-class. With :eq(n) only the selector
attached to the pseudo-class is counted, not limited to children of
any other element, and the (n+1)th one (n is 0-based) is selected.
Reference:
:nth-child() Selector
try this
this.parentNode().getElementsByTagName("table")[2].childNodes[2];
I prefer using .find() rather than the sizzle engine. Something like this:
var TheThirdRow = $('#part1').find('table')
.eq(2)
.find('tr')
.eq(2);

jQuery use selector after .find()

I've got a bit of code where I want to look at each row in a table and look for a particular with a class specific class.
$("tr").each(function() {
$(this).find("td").find(".group_name").css("background-color", "red");
});
So that all the td's with the class "group_name" are made red.
Actually this should be enough:
$("tr td.group_name").css("background-color", "red");
Use this
$('tr').find('td.group_name').css('background-color', 'red');
Why so complicated?
This is much easier
$('tr td.group_name').css('background-color', 'red');
You don't need to iterate over it...
When you do $("tr td.group_name") it will select all the td elements inside tr that have class = "group_name"
So
$("tr td.group_name").css("background-color", "red");
Will be more than enough :)
jQuery is really overkill here, since your end goal is to add a red background color to any <td> elements with the group_name class that are within a <tr> element (when are they not?). For that, you can just use a CSS declaration:
td.group_name {
background-color: red !important;
}
Is that what you want :
$("tr").each(function() {
$(this).find("td .group_name").css("background-color", "red");
});

Use jQuery for own attributes

<table>
<tr><td test='222'>sss</td></tr>
<tr><td test='111'>sss</td></tr>
<tr><td test='222'>sss</td></tr>
<tr><td test='111'>sss</td></tr>
</table>
$("[test]='111'").css('background-color', 'red');
LIVE: http://jsfiddle.net/MPmyc/1/
How can i set css only for test == 111 ? Now this added css for all TD.
$("td[test='111']").css('background-color', 'red');
The usual method to test for an attribute goes like this:
$('td[test="111"]').css(...);
with the entire test inside the [], not partially outside as in your sample.
You wrote your attribute selector incorrectly. Instead of:
[test]='111'
Write:
[test='111']
Edited code:
$("[test='111']").css('background-color', 'red');
http://jsfiddle.net/MPmyc/2/
Also, if you're not basing your selection off an element id, then I recommend limiting selectors to the narrowest sensible scope. I.e. select td elements:
td[test='111']
If the table had a class or id, I'd also narrow the scope to be under that table.
This will work:
$("[test='111']").css('background-color', 'red');
The predicate box mus surround the entire condition.
Change $("[test]='111'") to $('[test="111"]')
$('[test="111"]').css('background-color', 'red');
You need to enclose your attribute conditional test in between the brackets, not just the attribute name.
$("td[test=111]").css('background-color', 'red');

Categories