A parent div contains multiple divs, one div named .div_object_last should always be at the end. Like the example below :
HTML
<div class="div_parent">
<div class="div_object">1</div>
<div class="div_object">2</div>
<div class="div_object_last"></div>
<div class="div_object">3</div> <!--- append -->
</div>
Javascript :
$('#div_parent').append('<div class="div_object">3</div>');
Expected result using JS :
<div class="div_parent">
<div class="div_object">1</div>
<div class="div_object">2</div>
<div class="div_object">3</div>
<div class="div_object_last"></div> <!--- moved to end --->
</div>
I was wondering if it was possible to put div_object_last at the end after the append event ?
Select the .div_object_last and use before() to add the new content:
$('.div_parent .div_object_last').before('<div class="div_object">3</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_parent">
<div class="div_object">1</div>
<div class="div_object">2</div>
<div class="div_object_last">Last</div>
</div>
To insert an element before the last child element:
$('.div_parent').children().last().before('<div class="div_object">3</div>');
To move an existing element to be the last:
$('.div_object_last').appendTo('.div_parent');
To move el1 above/below el2:
// Above
$(el1).before(el2);
// Below
$(el1).after(el2);
You can try with this dynamic way :
$('.div_parent').append($('.div_parent .div_object_last'));
$('.div_parent div:last').before('<div class="div_object">3</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_parent">
<div class="div_object">1</div>
<div class="div_object">2</div>
<div class="div_object_last">Last</div>
</div>
Related
I am trying to detach the div from the relevant parent and then append to the same parent div.
//Jquery Code
jQuery(function(){
moveColorDots();
});
function moveColorDots(){
var copyDivData = jQuery('.variations_form.wvs-archive-variation-wrapper').detach();
copyDivData.appendTo('.product-variations');
}
<div class="pp-content-post">
<div class="variations_form wvs-archive-variation-wrapper">
some data here
</div>
<div class="product-box">
<div class="glasses-sec">
<h3>title</h3>
</div>
<div class="product-variations"></div>
</div>
</div>
Expected result.
But after running the above code I am getting the following result.
.detach Description: Remove the set of matched elements from the DOM.
That means you append all the detached elements to every product-variations element ..So
You need to loop through the variations_form.wvs-archive-variation-wrapper elements by using .each()
Also you can use .appendTo() directly
//Jquery Code
jQuery(function(){
moveColorDots();
});
function moveColorDots(){
jQuery('.variations_form.wvs-archive-variation-wrapper').each(function(){
var product_variations = jQuery(this).next('div').find('.product-variations');
jQuery(this).appendTo(product_variations);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pp-content-post">
<div class="variations_form wvs-archive-variation-wrapper">
some data here 1
</div>
<div class="product-box">
<div class="glasses-sec">
<h3>title</h3>
</div>
<div class="product-variations"></div>
</div>
</div>
<div class="pp-content-post">
<div class="variations_form wvs-archive-variation-wrapper">
some data here 2
</div>
<div class="product-box">
<div class="glasses-sec">
<h3>title</h3>
</div>
<div class="product-variations"></div>
</div>
</div>
Note: This line of code var product_variations = jQuery(this).next('div').find('.product-variations'); is depending on your html structure it works for the posted html here .. But if you've another html structure you need to modify it to catch the desired element
{"__reactInternalInstance$scd8ef5s9":{"tag":5,"key":null,"elementType":"div","type":"div","stateNode":"~","return":{"tag":5,"key":null,"elementType":"div","type":"div","stateNode":{"__reactInternalInstance$scd8ef5s9":"~__reactInternalInstance$scd8ef5s9~return","__reactEventHandlers$scd8ef5s9":{"id":0,"style":{"position":"absolute","zIndex":0,"display":"flex","justifyContent":"center","alignItems":"center","width":100,"height":100,"backgroundColor":"white"},"className":"box resizable","children":[{"type":"div","key":null,"ref":null,"props": "props..." ......
console.log(CircularJSON.stringify($(this).find("div")[0]));
Prints it.
Here is the html:
<div
className="myClass"
>
<div
className="resizerClass"
id="tomatoes"
>
<div className="resizers">
</div>
</div>
<div className="resizers"></div>
</div>
I need the id os resizerClass div? how to get it?
If you want to find ID by jQuery as your HTML attributes(className) then you can define attribute in square bracket like $('[className="resizerClass"]') and get other attributes value like attr('id').
$(document).ready(function(){
var getId = $('[className="resizerClass"]').attr('id');
console.log('id='+getId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div className="myClass">
<div className="resizerClass" id="tomatoes">
<div className="resizers"></div>
</div>
<div className="resizers"></div>
</div>
I'm working on a listing page and I am trying to create a "Load More Items" functionality. I'm attempting to use .load() to append all ".vehicleListing" elements from another page url (the second listing page) and add them after the last occurrence of a a div with the class of "vehicleListing".
Page 1:
<div class="overview-feature-1">
<div class="vehicleListing">1</div>
<div class="vehicleListing">2</div>
<div class="vehicleListing">3</div>
<div class="vehicleListing">4</div>
<div class="vehicleListing">5</div>
<div class="vehicleListing">6</div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
Page 2:
<div class="overview-feature-1">
<div class="vehicleListing">7</div>
<div class="vehicleListing">8</div>
<div class="vehicleListing">9</div>
<div class="vehicleListing">10</div>
<div class="vehicleListing">11</div>
<div class="vehicleListing">12</div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
Desired Result:
Page 1 after "Load More" functionality is executed:
<div class="overview-feature-1">
<div class="vehicleListing">1</div>
<div class="vehicleListing">2</div>
<div class="vehicleListing">3</div>
<div class="vehicleListing">4</div>
<div class="vehicleListing">5</div>
<div class="vehicleListing">6</div>
<div class="vehicleListing">7</div>
<div class="vehicleListing">8</div>
<div class="vehicleListing">9</div>
<div class="vehicleListing">10</div>
<div class="vehicleListing">11</div>
<div class="vehicleListing">12</div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
This is what I have so far, but it keeps adding it inside the last vehicleListing div instead of after it.
$(".vehicleListing").after().last().load('page2url' + ' .vehicleListing');
Can someone point out why it's inserting inside the last div instead of after it, and how I can correct this?
Here is what worked for me:
Add an empty div after the last vehicleListing in your first file
<div class="overview-feature-1">
<div class="vehicleListing">1</div>
<div class="vehicleListing">2</div>
<div class="vehicleListing">3</div>
<div class="vehicleListing">4</div>
<div class="vehicleListing">5</div>
<div class="vehicleListing">6</div>
<div id="container"></div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
And change your JS
$("#container").load('http://aba.bbtj.dev/test2.html' + ' .vehicleListing', function(){
$('#container').replaceWith(function() {
return $('.vehicleListing', this);
});
$( '<div id="container"></div>' ).insertAfter( ".vehicleListing:last" );
});
This will load the new vehicles in the empty div, and then remove that div and keep the new vehicles (using the replaceWith function).
Then we re-add the empty div to be able to add more vehicule.
Load documntation:
Description: Load data from the server and place the returned HTML into the matched element.
$(".vehicleListing").after().last()
Targets the last vehicleListing div.
You can try smething like:
$.load('page2url' + ' .vehicleListing').insertAfter(".vehicleListing:last");
Your probably going to have to go about this differently. As mentioned, load() takes the response and loads it into the element it is operating upon. Since it replaces the contents, it doesn't really fit what you are trying to do which is to append additional content to an existing element. Your best bet is to probably use an ajax method instead.
$.get('page2url' + ' .vehicleListing', function(data){
$(".vehicleListing").last().after(data);
});
I have a set of divs, and need to clone the link from the top and insert into the last div (mobile-link). It is either cloning the links from all of the divs, and then inserting all of them at once, or if I use :eq(0), it's putting the first link into all of the divs.
<div class="course">Accounting</div>
<div class="start-date">1-1-2017</div>
<div class="credits">4</div>
<div class="location">Online</div>
<div class="mobile-link"></div>
<div class="course">Business</div>
<div class="start-date">1-1-2017</div>
<div class="credits">3</div>
<div class="location">Online/Campus</div>
<div class="mobile-link"></div>
<script>
$(".course a:eq(0)").clone().appendTo(".mobile-link");
</script>
What do I need to change to make this work properly?
You need to process each anchor separately:
$(".course").each(function() {
var myLink = $(this).find('a').clone();
$(this).nextAll('.mobile-link').first().append(myLink);
});
Demo fiddle
Append method can take a function as argument, and here it is appending to the each .mobile-link first <a> from his previous .course div
$(".mobile-link").append(function(){
return $(this).prevAll('.course:first').find('a:first').clone();
});
Check the below snippet
$(".mobile-link").append(function(i) {
return $(this).prevAll('.course:first').find('a:first').clone();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="course">Accounting
</div>
<div class="start-date">1-1-2017</div>
<div class="credits">4</div>
<div class="location">Online</div>
<div class="mobile-link"></div>
<div class="course">Business
</div>
<div class="start-date">1-1-2017</div>
<div class="credits">3</div>
<div class="location">Online/Campus</div>
<div class="mobile-link"></div>
I beleive that you should use last (If I understood question correctly):
var lastDiv = $(".mobile-link").last();
$(".course a:eq(0)").clone().appendTo(lastDiv);
Here is jsfiddle: fiddle
i am using IPB and i am going to put each category into a new tab the category div is something like this:
<div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'>
and my tabs content is like this:
<div class="content">
<div id="content-1" class="content-1">
</div>
</div>
and the categories divs is already showing but i want it to be moved to the content-1 div without duplicate so i want it to move from its div to this div with jjava script how?
<script>
document.getElementById('content-1').appendChild(
document.getElementById('category_100')
);
</script>
this worked for me but how can i add more than id to category_100
i want it to be like this in one script code so i would not repeart the scrip code four times:
<div class="content">
<div id="content-1" class="content-1">
<div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'>
</div>
</div>
using my two lines the suggested things here is not working!
Try this code :
$('div[id^="category_"]').appendTo('#content-1')
Have a look to this fiddle : http://jsfiddle.net/lulu3030/sjEPx/2/
"using my two lines the suggested things here is not working!"
You just get a single element with an ID and trying to append it...
Live Demo
If you want to append multiple elements, there are many ways...
Wrap those elements and then append...
<div id="categories">
<div id='category_100'></div>
<div id='category_104'></div>
<!-- etc. -->
</div>
document.getElementById('content-1').appendChild(document.getElementById('categories'));
or add same class to all elements that you want to append...
<div id='category_100' class="myClass"></div>
<div id='category_104' class="myClass"></div>
[].forEach.call(document.getElementsByClassName("myClass"), function (value, index, array) {
document.getElementById("content-1").appendChild(value);
});
or get elements with query selector that match some pattern...
[].forEach.call(document.querySelectorAll("div[id^='category_']"), function (value, index, array) {
document.getElementById("content-1").appendChild(value);
});
and etc.