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.

how could I change the opacity of a div? [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I am new in javascript and I am trying to change the opacity of a div and I don't know how to do it, and I didn't find anything online.
here is my code so far:
Javascript
function close_images(){
document.getElementsByClassName("modificar_imagen").style.opacity="0";
}
HTML
<div class="modificar_imagen">
<div class="close1" onclick="close_images()"><img src="img/icons/close.png" alt="close"></div>
<div class="contenido">
<div class="grid">
<div class="image_user"><img src="img/user1.jpg"></div>
<div class="image_user"><img src="img/user1.jpg"></div>
</div>
</div>
</div>

document.getElementsByClassName("modificar_imagen") retrieves a HTMLCollection. It would be better to use document.querySelectorAll() so that you can use the forEach() method to iterate over the image collection:
document.querySelectorAll(".modificar_imagen").forEach(el=>el.style.opacity="0");
That should do it.
function close_images(){
document.querySelectorAll(".modificar_imagen").forEach(el=>el.style.opacity="0");
}
close_images()
<div class="modificar_imagen">
<div class="close1" onclick="close_images()"><img src="img/icons/close.png" alt="close"></div>
<div class="contenido">
<div class="grid">
<div class="image_user"><img src="img/user1.jpg"></div>
<div class="image_user"><img src="img/user1.jpg"></div>
</div>
</div>
</div>

How to find last child of child? [duplicate]

This question already has answers here:
How to select last child element in jQuery?
(6 answers)
Closed 5 years ago.
<div class="group-box">
<p>test1</p>
<div class="group-box">
<p>test2</p>
<div class="group-box">
<p>test3</p>
</div>
</div>
</div>
i want to get last $('.group-box')
how to find this?

use this
var last = $(".group-box:last");
you will get the last child
and checkout these answers
How to select last child element in jQuery?
select deepest child in jQuery

alert($('.group-box:last').text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="group-box">
<p>test1</p>
<div class="group-box">
<p>test2</p>
<div class="group-box">
<p>test3</p>
</div>
</div>
</div>

$( ".group-box:last-child" )
selector for last child/element

Javascript change h1 text [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
I am trying to change the text of h1 via using following code
document.getElementById("wpbody-content").getElementsByClassName("wrap").getElementsByTagName('h1')[0].innerHTML = 'Application Forms';
Here is the HTML code
<div id="wpbody-content">
<div class="wrap">
<h1>Text</h1>
</div>
<div class="clear"></div></div>
But it shows me following error
TypeError: document.getElementById(...).getElementsByClassName(...).getElementsByTagName is not a function

the getElementsByClassName() method returns an array of elements. You need to refer to the first wrap element in the array, just like you are correctly doing for the h1 elements.:
document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Application Forms';

Replace getElementsByClassName("wrap") by getElementsByClassName("wrap")[0]
document.getElementById("wpbody-content")
.getElementsByClassName("wrap")[0]
.getElementsByTagName('h1')[0].innerHTML = 'Application Forms';
<div id="wpbody-content">
<div class="wrap">
<h1>Text</h1>
</div>
<div class="clear"></div>
</div>

You can also use getElementsByTagName:
document.getElementById("wpbody-content").getElementsByClassName("wrap")[0].getElementsByTagName('h1')[0].innerHTML = 'Application Forms';
<div id="wpbody-content">
<div class="wrap">
<h1>Text</h1>
</div>
<div class="clear"></div>
</div>

try jQuery as
$('#wpbody-content .wrap h1').text('Application Forms');

AngularJS ng-repeat with seperator every two items

The layout I'm trying to achieve is this:
<div>
<div class="row">
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
<div></div>
</div>
</div>
Doing this gets me the divs, but how can I add separators between every two items? I feel like Angular should have an easy way to do this.
<div>
<div class="row">
<div ng-repeat="object in objects"></div>
</div>
</div>

I think, you can solve it using a bit of javascript and ng-repeat like
<div>
<div class="row" ng-repeat="array in obj2">
<div ng-repeat="object in array">{{object}}</div>
</div>
</div>
then in your angular controller create a new object called obj2 using the objects array like
$scope.obj2 = [];
while ($scope.objects.length) {
$scope.obj2.push($scope.objects.splice(0, 2))
}
Demo: Fiddle

If i get what you want to do, you could use the $index property of rgRepeat and then use modulo for that index like:
<div ng-repeat="object in objects">
<div>My Content</div>
<div data-ng-show="$index % 3 == 0">My Seperator</div>
</div>