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
Related
How can I achieve something like this.
I have a Container with
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
What I now want to archieve for example: If I have
const div1ToSwap = ( div 1 )
const div2ToSwap = ( div 4 )
That the final result will be
<div class="div4">4</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div1">1</div>
<div class="div5">5</div>
This is a very hacky way to do it, but this way you don't need to remove all elements then append them back in.
let div1 = document.querySelector(".div1");
let div4 = document.querySelector(".div4");
let temp = div1.cloneNode(true);
div1.innerHTML = div4.innerHTML;
div1.className = div4.className;
div4.innerHTML = temp.innerHTML;
div4.className = temp.className;
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
it's simple, first you need to container all the div you need to make this script like this, we will write the function later
you can try it by the link https://codepen.io/nt0412/pen/rNJWMKP
<div class="all-div-container">
<div class="div1" onclick="swapDiv(event,this);">
1
</div>
<div class="div2" onclick="swapDiv(event,this);">
2
</div>
<div class="div3" onclick="swapDiv(event,this);">
3
</div>
<div class="div4" onclick="swapDiv(event,this);">
4
</div>
<div class="div5" onclick="swapDiv(event,this);">
5
</div>
</div>
<script type="text/javascript">
function swapDiv(event, elem) {
elem.parentNode.insertBefore(elem, elem.parentNode.firstChild);
}
</script>
How can I use vanilla JS to find and delete elements with a specific class X where the parent has class Y?
Example. Given
<div class="likes noise1">
<div class="count noise2">
42
</div>
</div>
<div class="retweets noise3">
<div class="count noise4">
7
</div>
</div>
<div class="messages noise5">
<div class="count noise6">
2
</div>
</div>
I would like to delete the first two ".count" elements (the childs of ".likes" and ".retweets"). The messages div however should be left untouched.
I have tried using querySelectorAll which return a frozen NodeList and iterating it, without success.
You can loop through all the elements to check the Element.className property of the Node.parentNode to remove the element like the following way:
document.querySelectorAll('.count').forEach(function(el){
var classN = el.parentNode.className
if(classN.includes('likes') || classN.includes('retweets'))
el.remove();
});
<div class="likes">
<div class="count">
42
</div>
</div>
<div class="retweets">
<div class="count">
7
</div>
</div>
<div class="messages">
<div class="count">
2
</div>
</div>
OR: You can simply simply specify both the classes as part of the selector, in which case you do not need to check the parentNode as the selector will give you only the elements inside the parents:
document.querySelectorAll('.likes > .count, .retweets > .count').forEach(function(el){
el.parentNode.remove();
});
<div class="likes">
<div class="count">
42
</div>
</div>
<div class="retweets">
<div class="count">
7
</div>
</div>
<div class="messages">
<div class="count">
2
</div>
</div>
Another alternative, further to those already given is to keep an array of the css selector you'll need to find your targets. From there, it's just a simple matter of using querySelector so that the result is still live, albeit in a loop.
"use strict";
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onWindowLoaded, false);
function onWindowLoaded(evt)
{
var tgtSelectors = [ '.likes > .count', '.retweets > .count' ];
tgtSelectors.forEach(removeBySelector);
}
function removeBySelector(curSelector)
{
var tgt = document.querySelector(curSelector);
while (tgt != undefined)
{
tgt.remove();
tgt = document.querySelector(curSelector);
}
}
<div class="likes">
<div class="count">42</div>
</div>
<div class="retweets">
<div class="count">7</div>
</div>
<div class="messages">
<div class="count">2</div>
</div>
When I use $('.color-wrap div') its select first div of both color-wrappers.
I need to select only first but they must be as a group so I can't use
$('.colorbox:first-child') or $('.colorbox-hard:first-child').
I want to jQuery treat them as a group of 6 divs - its because, I want to choose one random div from group of six.
<div class="wrapper">
<div class="color-wrap">
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
</div>
<div class="color-wrap">
<div class="colorbox-hard"></div>
<div class="colorbox-hard"></div>
<div class="colorbox-hard"></div>
</div>
</div>
How to select 1 div of div with class color-wrap only?
var divs = $('.color-wrap div');
for(var i = 0 ; i < divs.length; i++){
console.log(divs[i]);
// You can use like this.
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="color-wrap">
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
</div>
<div class="color-wrap">
<div class="colorbox-hard"></div>
<div class="colorbox-hard"></div>
<div class="colorbox-hard"></div>
</div>
</div>
You can use also like this var divs = $('.color-wrap .colorbox, .color-wrap .colorbox-hard');
$('.color-wrap:first-child div:first-child') should do what you are looking for.
If I understand you correctly you could do something like this. refer to comments.
$(document).ready(function() {
// Collect all divs for both wrappers in variable
var group = $('.color-wrap').find('div');
// Store the amount of items in the group variable
var groupCount = group.length;
// Store random number between 0 and the amount of items minus 1
var randomIndex = Math.floor(Math.random() * groupCount);
// Use the random number as the key for the group variable to store one of the divs
var randomElement = group[randomIndex];
console.log(randomElement);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="color-wrap">
<div id="colorbox">One</div>
<div id="colorbox">Two</div>
<div id="colorbox">Three</div>
</div>
<div class="color-wrap">
<div id="colorbox-hard">Four</div>
<div id="colorbox-hard">Five</div>
<div id="colorbox-hard">Six</div>
</div>
</div>
Chrome shows a different sort result from other browsers - with Firefox and Edge showing the desired result.
How to achieve the same result with Chrome?
I tried, but not working, with:
$(function(){
var order = $('.files').find('.first','.second').sort(sortMe);
$('.files').append(order);
});
function sortMe(a, b) {
return a.first < b.second;
}
The desired result... and the default in Firefox and other browsers is:
<div class="file-container">
<div class="files">
<div class="first">content</div>
<div class="first">content</div>
<div class="second">content</div>
<div class="second">content</div>
</div>
</div>
Chrome returns
<div class="file-container">
<div class="files">
<div class="first">content</div>
<div class="second">content</div>
<div class="second">content</div>
<div class="first">content</div>
</div>
</div>
Selector at .find('.first','.second') is not correct, where second parameter should log an error Unexpected identifier, try adjusting to .find('.first, .second') without terminating string and including a literal comma , character which would pass two parameters, instead of single selector string, comparing a.dataset -b.dataset, wheredata-*` attributes have 0-based indexing from 0-n.
You can add data-* attribute at elements for comparison function.
$(function(){
var order = $('.files').find('.first, .second').sort(sortMe);
should be$('.files').append(order);
});
function sortMe(a, b) {
console.log(a.dataset)
return +a.dataset.order - +b.dataset.order;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-container">
<div class="files">
<div data-order="0" class="first">first content</div>
<div data-order="1" class="second">second content</div>
<div data-order="1" class="second">second content</div>
<div data-order="0" class="first">first content</div>
</div>
</div>
Solved this problem with jquery, but typically when different test data added to site Chrome returned expected result each time so code not needed this time...
var array = ['first', 'second'];
$.each(array,function(index,value){
$('.files').append($('.'+value));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="file-container">
<div class="files">
<div class="first">content for 1.1</div>
<div class="second">content for 2.1</div>
<div class="second">content for 2.2</div>
<div class="first">content for 1.2</div>
<div class="first">content for 1.3</div>
<div class="second">content for 2.2</div>
</div>
</div>
very new to AngularJS so please forgive me if this is a stupid question.
I need to output my data in a grid like format (using Ionic) and i need to have a div for a row and separate divs for columns, like this
<div class="row">
<div class="col-33">Item 1</div>
<div class="col-33">Item 2</div>
<div class="col-33">Item 3</div>
</div>
<div class="row">
<div class="col-33">Item 4</div>
<div class="col-33">Item 5</div>
<div class="col-33">Item 6</div>
</div>
My data is within a list, much like this.
$scope.images = [];
$scope.images.push({text: 1});
$scope.images.push({text: 2});
$scope.images.push({text: 3});
$scope.images.push({text: 4});
$scope.images.push({text: 5});
$scope.images.push({text: 6});
How can i use the $scope.images list to output my as a grid?
The closest i have got is below, but it doesnt work.
<ion-content>
<div class="list list-inset" ng-init="myIndex = 0">
{{myIndex }} : {{ images.length }}
<div ng-repeat="myIndex < images.length" >
<div class="row" ng-repeat="colIndex in [0, 1, 2]" ng-init="colIndex = 0">
<div ng-show="myIndex + colIndex < images.length" class="col-33" ng-init="myIndex = myIndex + 1">
{{ myIndex }}:{{ colIndex }}:{{myIndex + colIndex}}:{{ images[myIndex + colIndex].text}}
</div>
</div>
</div>
</div>
</ion-content>
Is there such a thing as a while loop? I was hoping i could increase the $index variable if i used ng-repeat="item in images", but not sure how to do that either.
Thanks in advance
Something like this? fiddle
<span style="float: left">{{item}}</span><br ng-if="($index+1)%3 == 0"/>
I simply break the line every three items, but we could expand on this approach.
Update with complete, working solution: fiddle
<div class="container">
<div ng-repeat="item in items" ng-if="$index%3==0" class="row">
<span ng-if="$index<items.length" style="float: left">{{items[$index]}}</span>
<span ng-if="($index+1)<items.length" style="float: left">{{items[$index+1]}}</span>
<span ng-if="($index+2)<items.length" style="float: left">{{items[$index+2]}}</span>
</div>
</div>
The code is pretty self-explaining: the solution creates a row every three elements, and inserts the elements only if they actually exist.
<div class="row" ng-repeat="photo in photos" ng-if="$index % 3 == 0" ng-init="photoIndex = $index">
<div ng-repeat="i in [0,1,2]" ng-if="(photoIndex + i)<photos.length" class="col-33">
<img ng-src="{{photos[photoIndex+i]}}">
</div>
</div>
Here is a more compact version of the above answer.