I'm recently learning JS/jQuery and I need help to apply a particular style/class to the top div when click the button inside it, but the problem is that the html has different sections with the same button and the same class on ancestor, and I want it to only apply to the actual div that contains the triggered button.
HTML:
<div class="class">
<div>
<div>
<button data-action="action">
<div class="class">
<div>
<div>
<button data-action="action">
SCRIPT:
$('[data-action="action"]').click(function() {
$(".class").addclass("new-class")
})
With this code obviously new-class is applied to all existing class classes regardless of the activated button.
Thanks!
Use the below code :
$('[data-action="action"]').click(function() {
$(this).closest('.class').addclass("new-class")
})
Use the "closest" which selects the first ancestor with a selector passed (in this case, first ancestor with "class" classname). The $(this) selector applies to the specific element that is clicked, in this case.
$('[data-action="action"]').click(function() {
$(this).closest(".class").addclass("new-class")
})
You can find the parent for the clicked element like this:
$('[data-action="action"]').click(function() {
$this.parents(".class").addclass("new-class")
})
You can provide id for the div along with class as..
<div class="class" id = "my_id">
<div>
<div>
<button data-action="action">
<div class="class">
<div>
<div>
<button data-action="action">
SCRIPT:
$('[data-action="action"]').click(function() {
$("#my_id .class").addclass("new-class")
})
try this it will work
Related
I want to target a table which is outside of the element I'd like to use as a 'trigger' and then give it an additional class.
<div>
<table class="table"></table>
</div>
<div></div>
<div class="trigger">
<!---content open--->
</div>
The class "trigger" only appears when that div is open, so when it's open and the class is added, I want to target the table directly above it, and ONLY that table. The problem is that the table class "table" appears more than once on the page and there is always a further div between the two elements. How would I select only that one table directly before?
Given your HTML structure, where the table you're trying to match is a child of a sibling node to trigger:
Get all the preceding siblings of trigger with prevAll(), search within them for a .table with find(), and keep the last one in the resulting match.
var preceding = $('.trigger').prevAll().find('.table').last();
$(preceding).addClass('match'); // for demo, so you can see what matched
.match {
color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table class="table"><tr><td>Don't want this table</td></tr></table>
</div>
<div>
<table class="table"><tr><td>Do want this table</td></tr></table>
</div>
<div>This sibling doesn't have a table</div>
<div class="trigger">This is the trigger</div>
<div class="table">Don't want this div</div>
<div>
<table class="table"><tr><td>or this table</td></tr></table>
</div>
This is pretty fragile. If possible, consider using specific classnames or IDs instead of depending on document order.
If I understood you correctly, you want to add a class to your table, right? If this is the case, you could add an id to the only table you want to modify and then use addClass.
<script>
//perform condition checking
$("#myTableID").addClass("class_to_add");
</script>
...
<div>
<table id="myTableID"></table>
</div>
<div></div>
<div class="trigger">
<!---content open--->
</div>
I have a really simple problem.
How can I find the first previous element of another element? I tried the code below without success.
HTML:
<div class = "A">HERE</div>
<div class="B">
<div class="C" style="width:50px;height:50px;background-color:#000000;"></div>
</div>
JS:
$('.C').click(function() {
alert($(this).closest('.A').html());
});
Fiddle: http://jsfiddle.net/Mcujp/4/
If you are trying to get the preceding sibling, use .prev().
If you are trying to get the sibling of the parent (like in your example) use .parent().prev().
Try this:
$('.C').click(function() {
alert($(this).parent().prev('.A').html());
});
$('.C').click(function() {
alert($(this).closest('.B').prev('.A').html());
});
if you want to target closest children of top parent you can do so as something define below.
lets assume you have an HTML like
<div class="top-parent">
<div class="parent">
<button class="add-button">Child of 1st Parent DIV</button>
</div>
<div class="parent">
<button class="add-button">Child of 2nd Parent DIV</button>
</div>
</div>
<script>
$(document).on('click','.add-button',function(){
$(this).parents('.parent').prev().closest('.parent').find('.add-button').text('im clicked by one of the button next to my parent')
$(this).parents('.parent').remove();
})
</script>
similarly if you want to target grandparent next parent containers children just change .prev() to .next()
hope i made it simple to define :)
<div>
<div>
<div class="one">child of 1 st Div</div>
</div>
<div>
<div class="two'>child of 2 st Div</div>
</div>
<div>
<div class="three">child of 3 st Div</div>
</div>
</div>
Here what I want to do is on clicking the div with class="one" I want to change the content of the third div where class="three"
You have a typo error here : <div class="two'> it should be this : <div class="two">
For the script, there are many way to do it, here is one :
$(function(){
$('.one').click(function(){
$('.three').text('hey');
});
});
Live example
In jQuery, you can attach a click event handler to a jQuery object using the click method. You select an element using the global jQuery function (usually jQuery or $). To select an element with a specific class, prepend . to the class.
$('.one').click(function(event) {
// this function will be fired when the div with class `one` is clicked
var $three = $('.three');
// $three is now a jQuery object representing the div
// DOM element with the class `three`
// your code here
});
First of all in your code you should correct your code for class = "two". In order to select a div use jquery .on() event handler.
$('selector').on('click',callback());
Refer to the following code.
$('.one').on('click',function(){
$('.three').addClass('changeColor');
})
I have also created a jsFiddle: https://jsfiddle.net/58kng68a/
I have a javascript button that fires an onclick event but i only want it to do that if another div contains a class called "active".
so I have this structure:
<div id="div1">
<div id="someid1" class="design"></div>
<div id="someid2" class="design"></div>
<div id="someid3" class="design"></div>
<div id="someid4" class="design"></div>
</div>
that based on other page activity any can change to class="active"
<div id="someid2" class="design active">
The button is:
<button type="button" id="button1" onclick="dosomething">Click me</button>
but i only want the dosomething to work if the above any of the divs has the active class, and throw an alert if it does not. I am not terribly good with javascript and could use some help.
Hope this is clear. Thanks.
Assuming dosomething is a function, you could just check for the class inside it
function dosomething() {
if ( document.querySelector('#parentid .active') ) {
// do stuff
}
}
querySelector returns null if not found, which is falsy.
document.querySelector documentation
I have the next code dynamically created using JQuery. Theere are multiple row class divs placed one under the other.
<div class="row">
....
</div>
<div class="row">
<div class="line_type"></div>
<div class="download_value"></div>
<div class="flag"></div>
<div class="email"></div>
<div class="prize"></div>
</div>
<div class="row">
....
</div>
After i create these divs I have a "pointer" to a specific div which is of class row. In JQuery, how do i make it so I go down the DOM tree, until i reach the div of class line_type and download_value and remove them both, and also I'd like to go one more node down, at the div of type email and change some of it's CSS attributes.
I was not able to find anything on the web, maybe it's cause i'm a noob at these still.
I have a "pointer" to a specific div which is of class row ->
Assuming that you have the this object of the corresponding div with class row.. then you can use .find to get the line_type and download_value inside that div.
$(this).find('.line_type').remove();
$(this).find('.download_value').remove();
Then you can use the same .find to get the div with class email and access the .css
$(this).find('.email').css(/* You code*/);
Assuming row_pointer points to the row in question:
$('.line_type, .download_value', row_pointer).remove();
$('.email', row_pointer).css(...);
check this out
$('div.row').bind('click', function() {
$this = $(this);
$('div.line_type, div.download_value', $this).remove();
$('div.email', $this).css('background-color', 'red');
});
http://jsfiddle.net/YvyE3/