I want to remove style attribute from my HTML elements but only from one div, not full html code. For example:
<div class="row" style="width: 100px"></div>
<div class="container"><p style="font-size: 12px"></p> </div>
I want only delete 'style' from all elements in div with class 'container'.
You can use removeAttr() & children() like:
$('div.container').children().removeAttr('style');
DEMO:
$('div.container')
.children() // Get the children of each element in the set of matched elements
.removeAttr('style'); // Remove style attribute from each element
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="width: 100px"></div>
<div class="container">
<p style="font-size: 12px">Test 1</p>
<p style="color: green; font-size: 12px">Test 2</p>
</div>
<hr/>
<div class="container2">
<p style="font-size: 12px">Test 1</p>
<p style="color: green; font-size: 12px">Test 2</p>
</div>
jQuery('.container*').attr('style','');
You can try this
$(".container").removeAttr("style")
Related
https://jsfiddle.net/072uwd1k/
I'm trying to change the number location to be placed above text, using insertBefore does just that but it's duplicating it for the number of divs in there.
<div class="box-wrap">
<div class="box">
<p class="text">ABC</p>
<p class="num">123</p>
</div>
<div class="box">
<p class="text">ABC</p>
<p class="num">123</p>
</div>
</div>
$('.num').insertBefore('.text');
While you have more classes num you need to use .each() and .prev() to get the previous .text element
$('.num').each(function(){
$(this).insertBefore($(this).prev('.text'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-wrap">
<div class="box">
<p class="text">ABC</p>
<p class="num">123</p>
</div>
<div class="box">
<p class="text">ABC</p>
<p class="num">123</p>
</div>
</div>
So what you need is .each() to loop through .num elements ..
$(this) to get spacific .num element and $(this).prev('.text')
to select the previous .text
Here is what the code looks like:
<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:block;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
</div>
</div>
</div>
I want to get the div with class5 and CSS property display set to block. Once I have this div I want to perform further action on that div. I tried using something like
$('.class1 .class2 .class3 .class4').find( '.class5').is(':visible')
but it doesn't work.
The problem you have is that is() returns a Boolean, reflecting whether the passed-in element (or the first of the passed-in elements) matches the supplied argument.
If you switch to filter(), which filters the passed-in collection according to the supplied argument; if the element matches then that element is retained, otherwise it's discarded:
let classFiveElems = $('.class1 .class2 .class3 .class4 .class5').filter( ':visible');
console.log(classFiveElems);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:block;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
</div>
</div>
</div>
What you want, though, is not just a simple check for visibility; but a test for a specific CSS property; so I'd suggest the following, which uses filter() but using the anonymous function:
let classFiveElems = $('.class1 .class2 .class3 .class4 .class5').filter(function() {
return this.style.display === 'block';
}).addClass('found');
console.log(classFiveElems);
.found {
color: #f90;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:block;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5'>
<p>Some text 1</p>
</div>
</div>
</div>
</div>
</div>
References:
filter().
find().
is().
As example:
if($('.class1 .class2 .class3 .class4')
.find( '.class5:first')
.is(':visible')){
console.log('yes');
}
See: https://jsbin.com/ninovic/edit?html,js,console,output
.is() returns a boolean, you can use the pseudo-selector inside find() to select the element:
$('.class1 .class2 .class3 .class4').find('.class5:visible')
Example
$('.class5').each(function(){
if ($(this).is(":visible")) {
//What you want to do
}
});
You can do it directly
alert('is visible?', $( '.class5').is(':visible'));
Actually every div with class5 class has a display: block property.
display: block property is a default state of every block element (divs are block elements).
I've set the display property of other divs to none, just to show functionality of following code.
$('div').each(function() {
if ($(this).hasClass('class5') && $(this).is(":visible")) {
console.log($(this).html());
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5' style="display:none;">
<p>Some text 1</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:none;">
<p>Some text 2</p>
</div>
</div>
<div class='class4'>
<div class='class5' value='t' style="display:block;">
<p>Some text 3</p>
</div>
</div>
<div class='class4'>
<div class='class5' style="display:none;">
<p>Some text 4</p>
</div>
</div>
</div>
</div>
</div>
This will return the .class5 having display:block property. IN Your case it will return all the elements. because all div in div contains default display property block, So it will return all of them in your case. and if you try then you have assure that only the elements(.class5) you want to select have display block property.
var selector = $('.class1 .class2 .class3 .class4').find( '.class5').filter(function() {
return $(this).css('display') == 'block';
});
I searched a lot on Stackoverflow, solution for my question, but no one of them helped me. I have a multiple show/hide (toggle) content, with same id's and I want to make, that the only one of them, what I need, opens, not all of them. There's my JSFiddle You can test it.
This is my JavaScript
$("#view").click(function(){
$('.hidden-content').slideToggle(500).toggleClass("active");
});
You cannot have duplicate id attributes within a single document. When you do only the first element with the given id is recognised; hence the issue you've seen.
Instead change the view elements to use a class, then use the this reference within the click event handler to traverse the DOM to find the related .hidden-content element and toggle it. Try this:
$(".view").click(function() {
$(this).closest('.div').find('.hidden-content').slideToggle(500).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
.view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
It is a bad practice to use same id for more than one elements.
You can try the following
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
and your jquery will look like the following
$(".view").click(function(){
$(this).parent('.content').next('.hiddencontent').slideToggle(500).toggleClass("active");
});
You should replace the id to class. And for accordion, you can use like below.
HTML,
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
Js,
<script>
$(document).ready(function(){
$(".hidden-content").hide();
$(".view").on('click', function(){
$(this).parents().parents().find(".hidden-content").slideToggle(500).toggleClass("active");
if($(this).parents().parents().siblings().find(".hidden-content").hasClass('active')){
$(this).parents().parents().siblings().find(".hidden-content").removeClass('active');
$(this).parents().parents().siblings().find(".hidden-content").hide();
}
});
});
</script>
You can change your click event as follows to make it work.
$("div[id='view']").click(function() {
$(this).parent().next().slideToggle(500).toggleClass("active");
});
Note: You shouldn't have the same id for multiple elements, id attribute value should be unique why because the id attribute is used to identify an element uniquely in the DOM. You can have the same class name for different elements.
Please refer this answer it provides more information on how things work when multiple elements have the same id attribute value.
$("div[id='view']").click(function() {
$(this).parent().next().slideToggle(500).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
#view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div id="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
$(".view").click(function() {
$(this).closest('.div').find('.hidden-content').slideToggle(200).toggleClass("active");
});
.div {
width: 400px;
}
.content {
padding: 10px;
}
.view {
color: red;
cursor: pointer;
}
.hidden-content {
display: none;
}
.hidden-content .active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
<div class="div">
<div class="content">
<div class="view">view/edit</div>
</div>
<div class="hidden-content">
hidden content
</div>
</div>
I want to add a class via jQuery to a parent div element with a shared class. I can use .closest to add the class added to the correct div.class but it also adds the class to the rest of the divs with the same target class.
So I only want the class adding to the child button.
$('.trigger').on('click', function() {
$('.myclass').addClass('current');
});
.current {
margin: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">
<div style="background-color:red;">
<div style="padding:10px">
<button class="trigger">
Button
</button>
</div>
</div>
</div>
<div class="myclass">
<div style="background-color:blue;">
<div style="padding:10px">
<button class="trigger">
Button
</button>
</div>
</div>
</div>
You need to use .closest() to selecting parent element has .myclass.
$(".trigger").on("click", function() {
$(this).closest(".myclass").addClass("current");
});
.current { margin: 30px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myclass">
<div style="background-color:red;">
<div style="padding:10px">
<button class="trigger">Button</button>
</div>
</div>
</div>
<div class="myclass">
<div style="background-color:blue;">
<div style="padding:10px">
<button class="trigger">Button</button>
</div>
</div>
</div>
You have to use $(this).closest('.myclass') method for closest parent class.
$('.trigger').on('click', function(){
$(this).closest('.myclass').addClass('current');
});
I want to select the first element that matches my criteria OUTSIDE of my container. I know how to find it if it's inside but when it's outside, I"m not sure. I want to only select the very first element it finds also, this is my attempt:
$('.text').click(
function(){
$(this).css('font-size', '50px');
$(this).next('span').css('color','red');
});
.one{
background:orange;
border:1px solid black;
height:200px;
width:200px;
}
span{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
So, in my example. If you click on the first text in the orange box labeled "text", it will change the color of the span directly outside it to red. Above the box and below it. It will not affect the other span, just the very first one.
$('.text').click(
function(){
$(this).css('font-size', '50px');
$(this).parent().next('span:first').css('color','red');
});
.one{
background:orange;
border:1px solid black;
height:200px;
width:200px;
}
span{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
Use .parent() which will return parent element of mentioned element. .next() will return next element of the current element. :first will return first element from matched elements.
Try this:
$('.text').click(
function() {
$(this).css('font-size', '50px');
$(this).parent('.one').next('span:first').css('color', 'red');
});
.one {
background: orange;
border: 1px solid black;
height: 200px;
width: 200px;
}
span {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
<div class="one">
<p class="text">
text
</p>
</div>
<span>First</span>
<span>Second</span>
Please try this
$(this).parent().next('span:first').css('color','red');
FIDDLE DEMO
.parent() :Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
:first : Given a jQuery object that represents a set of DOM elements, the .first() method constructs a new jQuery object from the first element in that set.
This will find very first elements above and below clicked div
$(this).parent().next('span:first').css('color','red');
$(this).parent().prev('span:first').css('color','red');
WORKING FIDDLE