Develop Reference

Reverse order only of divs with same class inside other divs

My problem is here: http://jsfiddle.net/9vhobdw7/2/
<div class="c-container">
<div>Container 4
<div>my div 4</div>
<div class="item">4</div>
</div>
<br>
<div>Container 3
<div>my div 3</div>
<div class="item">3</div>
</div>
<br>
<div>Container 2
<div>my div 2</div>
<div class="item">2</div>
</div>
<br>
<div>Container 1
<div>my div 1</div>
<div class="item">1</div>
</div>
</div>
I'd like to have only the divs with class="item" in reverse order, from bottom to top. Other divs need to be the same. Like this:
<div class="c-container">
<div>Container 4
<div>my div 4</div>
<div class="item">1</div>
</div>
<br>
<div>Container 3
<div>my div 3</div>
<div class="item">2</div>
</div>
<br>
<div>Container 2
<div>my div 2</div>
<div class="item">3</div>
</div>
<br>
<div>Container 1
<div>my div 1</div>
<div class="item">4</div>
</div>
</div>
Actually in the divs class="item" I have a call from divs from external URL with function load:eq(n).
I've tried with CSS, .each().reverse(), Array, replaceWith() and more functions but nothing, have no significant result.
Edit, add task.
Now, if the task includes more classes, with divs inside to reverse as
<div class="c-container">
<div>Container 6
<div>my div 6</div>
<div class="item2">3</div>
</div>
<br>
<div>Container 5
<div>my div 5</div>
<div class="item1">1</div>
</div>
<br>
<div>Container 4
<div>my div 4</div>
<div class="item2">2</div>
</div>
<br>
<div>Container 3
<div>my div 3</div>
<div class="item2">1</div>
</div>
<br>
<div>Container 2
<div>my div 2</div>
<div class="item1">2</div>
</div>
<br>
<div>Container 1
<div>my div 1</div>
<div class="item1">3</div>
</div>
</div>
I have to duplicate the function changing the variables names and classes names? I've tried this
const children1 = document.querySelectorAll('.c-container .item1');
const reverse1 = [...children1].reverse();
children1.forEach((item, i) => item.outerHTML = reverse1[i].outerHTML);
const children2 = document.querySelectorAll('.c-container .item2');
const reverse2 = [...children2].reverse();
children2.forEach((item, i) => item.outerHTML = reverse2[i].outerHTML);
which works, but it seems redundant.

Here's a solution, not really swapping divs, just swapping content:
var items=document.getElementsByClassName("item");
var length=items.length;
for(var i=0; i<Math.floor(length/2); i++) {
var temp=items[i].innerHTML;
items[i].innerHTML=items[length-i-1].innerHTML;
items[length-i-1].innerHTML=temp;
}
items and length are helper vars.
innerHTML can be replaced with innerText.
etc...
Edit: fixed with Math.floor(length/2). (There's an extra swap when length is odd...)

You can replace innerHtml for div with class item:
$(document).ready(function() {
var listItems = Array.from(document.getElementsByClassName('item')).map(i=>i.cloneNode(true))
Array.from(document.getElementsByClassName('item')).forEach((item,index)=>{
item.innerHTML = listItems[listItems.length-index-1].innerHTML
})
});
See full example in the playground: http://jsfiddle.net/denisstukalov/7uhmzbct/23/

You shouldnt be trying to reverse the divs... You are trying to reverse what those divs display. So, you can build an array of the contents of the "item" divs themselves. Then reverse the order of that array and then replace the innerHTML of your "item" divs.
Example below... it is not the most effecient code because it iterates over your list twice... but for the purposes of showing what you need to do to accomplish what it sounds like you're wanting, I think its more illustrative.
function reverseItemContents() {
var itemDivs = document.getElementsByClassName("item");
var contentList = [];
var index;
for (index = 0; index < itemDivs.length; index++) {
contentList.push(itemDivs[index].innerHTML);
}
contentList.reverse();
for (index = 0; index < itemDivs.length; index++) {
itemDivs[index].innerHTML = contentList[index];
}
}
<button onClick="reverseItemContents()">Reverse Content</button>
<div class="c-container">
<br>
<div>Container 4
<div>my div 4</div>
<div class="item"><img src="https://upload.wikimedia.org/wikipedia/commons/1/16/Eo_circle_blue-grey_white_number-4.svg" width="130"></div>
</div>
<br>
<div>Container 3
<div>my div 3</div>
<div class="item"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/NYCS-bull-trans-3.svg/1024px-NYCS-bull-trans-3.svg.png" width="130"></div>
</div>
<br>
<div>Container 2
<div>my div 2</div>
<div class="item">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Icon_2_red.svg" width="130"></div>
</div>
<br>
<div>Container 1
<div>my div 1</div>
<div class="item"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Icon_1_%28set_orange%29.png" width="130"></div>
</div>
</div>

My method would be to simply select them all, reverse the array, and then overwrite the original items. Using outerHTML means that more than just the divs' contents will be swapped.
function reverse(selector) {
const children = document.querySelectorAll(selector);
const reversed = [...children].reverse();
children.forEach((item, i) => item.outerHTML = reversed[i].outerHTML);
}
<div class="c-container">
<div>Container 4
<div>my div 4</div>
<div class="item" style="background-color: tomato;">4</div>
</div>
<br>
<div>Container 3
<div>my div 3</div>
<div class="item" style="background-color: orange;">3</div>
</div>
<br>
<div>Container 2
<div>my div 2</div>
<div class="item" style="background-color: yellow;">2</div>
</div>
<br>
<div>Container 1
<div>my div 1</div>
<div class="item" style="background-color: lightgreen;">1</div>
</div>
</div>
<button onclick="reverse('.c-container .item')">Reverse</button>
I don't really see a need to add all the extra complexity proposed by the other answers. Using an arugment will allow you to re-use the function for other sets of nodes.

get sequence of div from html

I have 9 HTML divs as:
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="9">9</div>
Now sequence in HTML is : (id) 1 2 3 4 5 6 7 8 9
These divs can be rearranged to get any order in the DOM.
Say after swapping the DOM is like this:
<div id="8">8</div>
<div id="2">2</div>
<div id="5">5</div>
<div id="1">1</div>
(after swapping/reordering) Now sequence in HTML is : (id) 8 2 5 3 4 7 9 6 1
I want to get the order(8 2 5 3 4 7 9 6 1) of div in a span.
<div id="show">Now the sequence is <span id="seq"> </span></div>

Use a common class to get all the div that you need. Then use each to get it's text(or id) and form a string and append it to the dom
HTML
<div id="8" class="sqDiv">8</div>
<div id="2" class="sqDiv">2</div>
<div id="5" class="sqDiv">5</div>
<div id="1" class="sqDiv">1</div>
<span id="sqDom"></span>
JS
var _sq="";
var getDivs = $(".sqDiv");
getDivs.each(function(item,index){
_sq+=$(this).text().trim()+' ';
})
$("#sqDom").text(_sq);
JSFIDDLE

Use map() method and do something like
$('#seq').text(
$('#parent div') // get the swapped divs
.map(function() { // iterate over them to generate an array
return this.id // return id for array element
}).get() // get result as an array
.join(' ') // join the array element
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="8">8</div>
<div id="2">2</div>
<div id="5">5</div>
<div id="1">1</div>
</div>
<div id="show">Now the sequence is <span id="seq"> </span>
</div>

This is how I did it:
$("ul div").each(function(){
$("#seq").text($("#seq").text() + $(this).attr("id") + " ");
});
Here is the JSFiddle demo

Hi try this https://plnkr.co/edit/FxemUZMAmEqo2oXvvMXN?p=preview
JS
var IDs2 = [];
$("#swapping").find("div").each(function(){ IDs2.push(this.id); });
$("#seq2").html(IDs2)
HTML
<div id="swapping">
<div id="8">8</div>
<div id="2">2</div>
<div id="5">5</div>
<div id="4">4</div>
<div id="3">3</div>
<div id="2">2</div>
<div id="1">1</div>
</div>
<div id="show2">Now the sequence is <span id="seq2"> </span></div>

I did that using $.each loop,
HTML CODE
<div id="8">8</div>
<div id="2">2</div>
<div id="5">5</div>
<div id="1">1</div>
<div id="show">Now the sequence is <span id="seq"> </span></div>
Jquery
var divs=[];var seq=[];
divs=$("div");
$.each(divs,function(k,v){
if($(v).attr('id')!='show')
{
seq[k]=$(v).attr('id');
}
})
$('#seq').text(seq);
Jsfiddle Example

Bootstrap different col-* with ng-repeat

I've got a movie reviews example application built in angular + bootstrap, I'm trying to build a "grid" of 3 images for medium and up screens, the problem is that when I want to have only 2 images per row for xs screens.
I'm using ng-repeat and populating the imgs inside the cols.
is there a nice way to do this? (I'm aware that the $index + N may be out of bounds, and that there is code duplication here. just want to find a good solution for rearranging the bootstrap grid for different screen sizes on dynamic data)
<div ng-repeat="movie in movies" ng-if="$index % 3 == 0" class="row slide-left">
<div class="col-md-4">
<img ng-src='http://image.tmdb.org/t/p/w185/{{movies[$index].poster_path}}' ng-click="chooseMovie(movies[$index])">
</div>
<div class="col-md-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 1].poster_path}}" ng-click="chooseMovie(movies[$index + 1])">
</div>
<div class="col-md-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 2].poster_path}}" ng-click="chooseMovie(movies[$index + 2])">
</div>
</div>

<div ng-repeat="movie in movies" >
<div class="col-md-4 col-xs-6">
<img ng-src='http://image.tmdb.org/t/p/w185/{{movie.poster_path}}' ng-click="chooseMovie(movie)">
</div>
</div>
This should do the trick.
I removed the row but i think even with it will works unless you use the clearfix class.
The grid will automatically go on the next line after "12" columns.
So a size of 4 for medium screen means 3 per line, 6 for xs screen ->2/line :)

You can detect bootstrap columns by using the following function:
function findBootstrapEnvironment() {
var envs = ["ExtraSmall", "Small", "Medium", "Large"];
var envValues = ["xs", "sm", "md", "lg"];
var $el = $('<div>');
$el.appendTo($('body'));
for (var i = envValues.length - 1; i >= 0; i--) {
var envVal = envValues[i];
$el.addClass('hidden-'+envVal);
if ($el.is(':hidden')) {
$el.remove();
return envs[i]
}
};
}
The setting a value to the scope based on the return
if(findBootstrapEnvironment()==="Medium"|(findBootstrapEnvironment()==="Large"|){
$scope.size="Medium"
}else{
$scope.size="Small"
}
And then with ng-if you can manage the div to be with 3 or 2 photos like this
Three photos if medium
<div ng-repeat="movie in movies" ng-if="size==medium" class="row slide-left">
<div class="col-md-4">
<img ng-src='http://image.tmdb.org/t/p/w185/{{movies[$index].poster_path}}' ng-click="chooseMovie(movies[$index])">
</div>
<div class="col-md-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 1].poster_path}}" ng-click="chooseMovie(movies[$index + 1])">
</div>
<div class="col-md-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 2].poster_path}}" ng-click="chooseMovie(movies[$index + 2])">
</div>
</div>
Two photos if small
<div ng-repeat="movie in movies" ng-if="size==small" class="row slide-left">
<div class="col-sm-4">
<img ng-src='http://image.tmdb.org/t/p/w185/{{movies[$index].poster_path}}' ng-click="chooseMovie(movies[$index])">
</div>
<div class="col-sm-4">
<img ng-src="http://image.tmdb.org/t/p/w185/{{movies[$index + 1].poster_path}}" ng-click="chooseMovie(movies[$index + 1])">
</div>
</div>

Create a DIV container dynamically

I have two lines of html code that already output by php
<div class="product-info weight">Weight: 10 kg</div>
<div class="product-info dimensions">Dimensions: 10 cm × 10 cm × 10 cm</div>
And i want to insert a div as a container to above two line so i can add some css to the container.
<div class="product-info-container">
<div class="product-info weight">Weight: 10 kg</div>
<div class="product-info dimensions">Dimensions: 10 cm × 10 cm × 10 cm</div>
</div>
is it possible to achieve by jquery? And how to do that?

You can use .wrapAll()
$('.product-info').wrapAll('<div class="product-info-container"></div>')
Demo: Fiddle

$(".product-info.weight, .product-info.dimensions").wrapAll( "<div class='product-info-container'></div>" );

Paging javascript

I'm trying to make a simple hard coded paging system via html and javascript.
I have given each element an id PM-1, PM-2, PM-3, etc and each page will list 10 of these items.
(I know this is a very inconvenient paging system but it's just for experimental purposes.)
So. my code html is as listed below -
<div id="PM-22">item 1</div>
<div id="PM-21">item 2</div>
<div id="PM-20">item 3</div>
<div id="PM-19">item 4</div>
<div id="PM-18">item 5</div>
<div id="PM-17">item 6</div>
<div id="PM-16">item 7</div>
<div id="PM-15">item 8</div>
<div id="PM-14">item 9</div>
<div id="PM-13">item 10</div>
<div id="PM-12">item 11</div>
<div id="PM-11">item 12</div>
<div id="PM-10">item 13</div>
<div id="PM-9">item 14</div>
<div id="PM-8">item 15</div>
<div id="PM-7">item 16</div>
<div id="PM-6">item 17</div>
<div id="PM-5">item 18</div>
<div id="PM-4">item 19</div>
<div id="PM-3">item 20</div>
<div id="PM-2">item 21</div>
<div id="PM-1">item 22</div>
<span style="text-align:right;"><p>Page 1 2 3</p></span>
And my javascript function as as follows -
<script type="text/javascript">
function PMPaging(num,pg) {
pg *= 10;
var upperlim = num - pg - 10;
var lowerlim = upperlim - 10;
if(lowerlim < 0) { lowerlim =0;}
for(num; num > 0; num--) {
document.getElementById('PM-'+num).style.display = 'none';
while (num <= upperlim && num > lowerlim) {
document.getElementById('PM-'+num).style.display = 'block';
num--;
}
}
}
</script>
Assume first 10 items are showing only on page load and the rest are hidden - Now whenever I run this code, it does show the first 10 items only, but when i click page 2 or 3 nothing happens, and if I click page 1 it shows the last 2 items? wtf? lol, first page is id number "22-13" and second page is "12-2", third page should be "2-1"..Thanks!

Is there a reason you aren't using the JQuery Pagination Plugin? Have a look at the demonstration.
If you need to be able to link to a specific page, have a look at this answer.

I get your point. You can use this modified script for the same purpose. I hope it helps. (You don't have to change your html part.
<script type="text/javascript">
function PMPaging(num,pg) {
pg *= 10;
var upperlim = pg+1;
var lowerlim = upperlim - 10;
if(lowerlim < 0) { lowerlim =1;}
for(i=1; i <= num; i++) {
if(i<=upperlim && i>=lowerlim){
document.getElementById('PM-'+i).style.display = 'block';
}else{
document.getElementById('PM-'+i).style.display = 'none';
}
}
}
</script>

surround your items with this div:
<div class="itms">
<div id="PM-22">item 1</div>
<div id="PM-21">item 2</div>
<div id="PM-20">item 3</div>
<div id="PM-19">item 4</div>
<div id="PM-18">item 5</div>
<div id="PM-17">item 6</div>
<div id="PM-16">item 7</div>
<div id="PM-15">item 8</div>
<div id="PM-14">item 9</div>
<div id="PM-13">item 10</div>
<div id="PM-12">item 11</div>
<div id="PM-11">item 12</div>
<div id="PM-10">item 13</div>
<div id="PM-9">item 14</div>
<div id="PM-8">item 15</div>
<div id="PM-7">item 16</div>
<div id="PM-6">item 17</div>
<div id="PM-5">item 18</div>
<div id="PM-4">item 19</div>
<div id="PM-3">item 20</div>
<div id="PM-2">item 21</div>
<div id="PM-1">item 22</div>
</div>
<span style="text-align:left;"><p>Page 1 2 3</p></span>
then use this code for JS:
function Paginate(itemsPerPage) {
var items = document.querySelectorAll(".itms div"),
iL = items.length || 0;
this.turnPage = function(pageNum) {
var startItem = (pageNum*itemsPerPage) - itemsPerPage;
for (var i = 0; i < iL; i++) {
items[i].style.display = (startItem <= i && i < (startItem + itemsPerPage)) ? "block" : "none";
}
}
}
var P = new Paginate(10);//10 items per page
to turn pages, use:
P.turnPage(2); //2 for the page Number