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
Related
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")
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';
});
for example I have this html code:
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>
I made settings class to display nothing in css, unless I click on one of 4 p elements in product class. After click the settings class appears at the bottom as it should be.
How should I make that if I click for example Name2 then settings class appears after Name2 and not at the bottom?
Use $(this) to target the element you clicked on, combined with insertAfter() to add the content to this element.
Run the code snippet below and click on any of the elements with the classname product to see how this works.
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
$(".product").click(function(){
$(".settings").insertAfter($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1
<p>
</div>
<div class="product">
<p>Name2
<p>
</div>
<div class="product">
<p>Name3
<p>
</div>
<div class="product">
<p>Name4
<p>
</div>
<div class="settings">
<p>SETTINGS
<p>
</div>
You can use .insertAfter() :
$(function(){
$('.product p').click(function(){
$('.settings').insertAfter($(this).closest('.product '))
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<p>Name1<p>
</div>
<div class="product">
<p>Name2<p>
</div>
<div class="product">
<p>Name3<p>
</div>
<div class="product">
<p>Name4<p>
</div>
<div class="settings">
<p>SETTINGS<p>
</div>
You can do it like,
$(".product > p").click(function(){
var $parent = $(this).parent(".product");
$parent.siblings(".settings").insertAfter($parent);
});
by using .insertAfter()
DEMO
Consider this HTML code:
<div id="id1">
<div id="id2"></div><br>
<div id="id3"></div>
<br>
<div id="id2"></div><br>
<div id="id3"></div>
<br>
<div id="id2"></div><br>
<div id="id3"></div>
<br>
</div>
And this is my script:
for($olindex=0; $olindex<3; $olindex++){
$("#id1").children("#id3").eq($olindex).text(result2[$olindex]);
}
Now things are not working: There's nothing wrong with result2[$olindex] but still the text is not displayed in each element with id3. Maybe I've written wrong DOM code. How can I correct or change it to make it work?
Your selectors are incorrect. If you want to select elements by ID, use #:
var result2 = [0,1,2];
for(var $olindex=0; $olindex<3; $olindex++) {
$("#id1").children("#id3").eq($olindex).text(result2[$olindex]);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id1">
<div id="id2"></div>
<div id="id3"></div>
<div id="id2"></div>
<div id="id3"></div>
<div id="id2"></div>
<div id="id3"></div>
</div>
That said, IDs must be unique. Use another approach, e.g. classes.
You've used several div elements with the same ID. ID should be unique per element, which is causing your issue.
You're better off using classes for your divs:
<div id="id1">
<div class="id2"></div><br>
<div class="id3"></div>
<br>
<div class="id2"></div><br>
<div class="id3"></div>
<br>
<div class="id2"></div><br>
<div class="id3"></div>
<br>
</div>
You can then use your JQuery Selector with a class instead:
$("#id1").children(".id3")
I think this is what you want to achieve:
'<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<div id="id1">
<div id="id2"></div><br>
<div id="id3"></div>
<br>
<div id="id2"></div><br>
<div id="id3"></div>
<br>
<div id="id2"></div><br>
<div id="id3"></div>
<br>
</div>
<script>
for($olindex=0; $olindex<3; $olindex++){
$("#id1").children("#id3").eq($olindex).text(result2[$olindex]);
}
</script>'
If you are using IDs you need to use "#", not ".". "." is for classes.
Also, I don't recommend using the same ID for multiple elements.
I have a div with the ID wrapper, and I am using .append() to insert some content at the end of that div, like this:
$("#wrapper").append('<div class="content"><div class="subcontent">Some stuff</div></div>');
However, I also want the option to insert a new child before the last content div in the wrapper.
So if the HTML output looks like this:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
I want to insert an element before the last one, so I get this:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Third
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
How would I do this?
You could use .before() to add a sibling before the element:
$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');
.insertBefore() does the same thing with a different syntax, namely that you select the element to be added, and pass the element you want to add it before.
$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
You can use insertBefore():
$('<div class="content"><div class="subcontent">Some stuff</div></div>').insertBefore('#wrapper > div:last');
Or before():
$('#wrapper > div:last').before('<div class="content"><div class="subcontent">Some stuff</div></div>');
This is how I got there:
http://jsfiddle.net/lharby/00tk6avg/
var htmlString = '<div class="subcontent">Some stuff</div>';
$(htmlString).insertBefore('.content div:last');
Select the last element with :last-of-type and use before() to append the new element:
$('.content:last-of-type').before('<div class="new">test</div>');
.new { color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
Use insertBefore:
$('<div class="content"><div class="subcontent">Third</div></div>').insertBefore('#wrapper .content:last');
Insert every element in the set of matched elements before the target.
Demo: http://api.jquery.com/insertBefore/
$( "<p>Test</p>" ).insertBefore( "#wrapper > div:last-child" );
You can last() for selecting last item, and before() for appending
$("#wrapper .content").last().before('<div class="content"><div class="subcontent">Some stuff</div></div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class=" content ">
<div class="subcontent ">
First
</div>
</div>
<div class="content ">
<div class="subcontent ">
Second
</div>
</div>
</div>
you can use nth last child to select the second last div.
fiddle:
http://jsfiddle.net/08ta9wnL/
html:
<div id="wrapper">
<div class="content">
<div class="subcontent">
First
</div>
</div>
<div class="content">
<div class="subcontent">
Second
</div>
</div>
</div>
javascript:
$(document).ready(function(){
$("#wrapper div:nth-last-child(2)").append('<div class="content"><div class="subcontent">Some stuff</div></div>');
});
You can do like this
$("#wrapper .content:last").before("<div class="content"><div class="subcontent">Some stuff</div></div>");
Have a look at fiddle https://jsfiddle.net/48ebssso/