jQuery use selector after .find() - javascript

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");
});

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.

Change parent element style with jQuery

I have next html setup:
<div class="one">
<div class="two">
Click
</div>
</div>
And I want to change background color for element with class .one when I click on element .three with jQuery.
This is what I was trying to use:
$(function(){
$('.three')(function(){
$(this).parent().parent().css('backgroundColor', 'red');
})
});
Here is a fiddle example: https://jsfiddle.net/Munja/a7unbs2p/
I was searching for solution here on SO but wasn't able to find it fast enough (probably I didn't look good enough :/).
Thank you.
you need to use .click() or .on('click') .. and you can use .closest() as well instead of using parent() twice
$(function(){
$('.three').on('click',function(){
$(this).closest('.one').css('backgroundColor', 'red');
})
});
Just add Click event at your code. First add jquery.min.js then add the script. You can do like this -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(".three").click(function(){
$(this).parent().parent().css("background","red");
});
</script>
Since it's a descedant of the element, you can use .parents() which travels up until the selector is found.
Additionally, You can use the CSS syntax inside of the CSS method (background-color instead of backgroundColor).
$('.three').on('click', function(){
$(this).parents('.one').css('background-color', 'red');
})
I can't comment, so, little addition to higher answer:
$(function(){
$('.three').on('click',function(){
$(this).closest('.one').css('background-color', 'red');
})
});
Css doesn't have property with name backgroundColor
You can use something like this.
$('.three').on('click',function(){
$(this).closest('.one').css('backgroundColor', 'red');
})

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>

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

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.

Get elements that are not inside of an element that has a known class

Suppose you have the following HTML code:
<div class="test">
<div class="class1">
<input type="text" data-required="true"/>
</div>
<input type="text" data-required="true"/>
</div>
I want to get all elements that have data-required attribute from .test that are not inside of the .class1 div.
So, in the example above only the second input would be returned.
I tried:
$(".test [data-required]:not('.class1')")
but it returns the both input because :not doesn't select the parent elements.
Is this possible with one jQuery selector?
JSFIDDLE
One way of doing this:
$(".test [data-required]").filter(function() {
return !$(this).closest('.class1').length;
}).css("background", "red");
.filter() method is much faster than spaghetti-like selectors, if you don't want to use .filter(), probably you can use this long, inefficient selector:
$(".test > [data-required], .test :not(.class1) [data-required]");
Use filter():
var $inputs = $('.test [data-required]').filter(function() {
return $(this).closest('.class1').length == 0;
});
If the input you want to find is always a direct child of .test div, you can use
$(".test > [data-required]").css("background", "red");
FIDDLE http://jsfiddle.net/wERTv/1/
You can use the below. It selects only the direct children of .test.
Note: Wouldn't include elements with data-required under say .class2 also.
$(".test > [data-required]").css("background", "red");
Working Demo
EDIT: Updated based on your further clarifications.
$(".test [data-required]").each(function() {
if (!$(this).parents('.class1').length)
$(this).css('background-color','red');
});
Working Demo2

Categories