This question already has answers here:
How can I select an element with multiple classes in jQuery?
(14 answers)
Closed 6 years ago.
This is probably a silly question.
I have this class
<div class="about_us aperto">
how do I call it in a JS function?
I'm trying:
$('.about_us aperto').click(function(){...
$('.about_us .aperto').click(function(){...
but they do not work.
You have to connect them. The proper selector would be:
$('.about_us.aperto')
If you wants to select an element having multiple classes like <div class="classA classB ClassC"></div> then just join them together in JavaScript i.e. $('.classA.classB.classC').click(function() {...});
$('.about_us.aperto').click(function() {
$(this).toggleClass('active');
});
.active {
background: #0f0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="about_us aperto">
<p>Lorem ipsum dolor sit amet</p>
</div>
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
Here I have an example:
$('#key').on('click', function(){
$('.task').html("<button id='key'>Button</button>"+Date());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='task'>
<button id='key'>Button</button>
</div>
How I can apply javascript for overwriting element and get different time for each button press?
Clearly there is no need to ovveride button here. Do not ovveride button. Use a span for date.
$('#key').on('click', function(){
$('.datestr').html(Date());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='task'>
<button id='key'>Button</button>
<span class='datestr'></span>
</div>
This question already has answers here:
Replace Div with another Div
(3 answers)
Closed 6 years ago.
I need a simple solution for replacing a div with a new div, cross-browser compatible using javascript or JQuery. I'll add some code below. Div "myDiv-B" needs to be replaced by a new div:
<div id="myDiv-C">{% include 'snippets/contactpaneel.rain' %}</div>
Here are my divs
<div id="myDiv-A">
<div id="myDiv-B"></div>
</div>
You should use .replaceWith() method.
.replaceWith method replace each element in the set of matched
elements.
$('#myDiv-B').replaceWith('<div>Hello</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv-A">
<div id="myDiv-B"></div>
</div>
This question already has answers here:
jQuery OR Selector?
(6 answers)
Closed 6 years ago.
Here is my current code:
$(".close_btn").click(function(e) {
$(".box1").fadeOut(100);
$(".box2").fadeOut(100);
});
As you see, currently, when you click on .close_btn, both .box1 and .box2 will be hidden. Now I want to use $(this) and .closest() to hide just one box (the parent of clicked .close_btn, there are two .close_btn). I mean I want something like this:
$(".close_btn").click(function(e) {
$(this).closest(".box1" OR ".box2").fadeOut(100);
});
Is doing that possible?
You can just use a comma to separate multiple selectors:
$(".close_btn").click(function(e) {
$(this).closest(".box2, .box1").fadeOut(100);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1">
<button class="close_btn">Close</button>
</div>
<div class="box2">
<button class="close_btn">Close</button>
</div>
This question already has answers here:
How do I select text nodes with jQuery?
(12 answers)
Closed 7 years ago.
In below code, I want to hide the "Lorem Ipsum is a dummy content" by showing the other elements inside the parent container, either by using jquery, javascript or CSS? Solution much appreciated.
<div class="someWrapper">
Lorem Ipsum is a dummy content
<div class="anotherContainer">
<p>Text goes here</p>
</div>
</div>
To do that you need to target the textNode of the .someWrapper element and remove them from the DOM. To do that you can use filter() and remove(). Try this:
$('.someWrapper').contents().filter(function() {
return this.nodeType == Node.TEXT_NODE; // 3
}).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someWrapper">
Lorem Ipsum is a dummy content
<div class="anotherContainer">
<p>Text goes here</p>
</div>
</div>
You can do this with a one liner, either with plain JavaScript:
document.getElementsByClassName('someWrapper')[0].firstChild.remove();
jsFiddle example
or jQuery:
$($('.someWrapper').get(0).firstChild).remove();
jsFiddle example
You can select inner content, empty outer element and append inner ounce again:
$(document).ready(function(){
$outer = $('.someWrapper');
$inner = $('.anotherContainer');
$outer.empty();
$outer.html($inner);
});
here is fiddle: https://jsfiddle.net/woo3cgwx/
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
My dynamic posts are added by .load() and they enter the DOM as such:
<div class="post">
<h2>Basic Info</h2><button class="closer">X</button>
<div class="innerPost">
<h5>Notes:</h5>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
My jQuery to remove the the post works on the static first post on the page but not the newly added dynamic ones. Here is the jQuery:
$(".closer").on('click', function() {
$(this).parent().remove();
});
I've been trying different selectors and reviewing similar problems from other people but still can't seem to get it work. Any help is much appreciated :)
This is because the elements are not in the DOM when the selector is run. Use event delegation.
$(document).on('click', ".closer", function() {
$(this).parent().remove();
});