We Keep Coding

Open a random popup div with random with different class number jQuery

As an all-time JS beginner, I'm trying to show a different popup each time on button click.
Tried a bunch of different things but nothing worked so far...
Each popup div has a class "pop" + a number afterward, so "pop1", "pop2"... On click, I want to show a different popup in random order.
HTML:
<div class="button">
<img class="" src="images/button.png">
</div>
<div class="pop1 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now
</div>
</div>
</div>
</div> <!-- end pop1 -->
<div class="pop2 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now
</div>
</div>
</div>
</div> <!-- end pop2 -->
my jQuery so far to show/hide the popup:
//show popup on click with a delay
setTimeout(function(){
$(".pop").removeClass("hide");
$(".pop").addClass("show");
$(".pop").show();
$(".success-msg").show();
}, 3800);
Trying to add new jQuery code to randomize the popup by allowing a different popup show:
$('.button ').click(function () {
class_is=$(this).attr('class').match(/block-[0-2]/,'');
$('.pop div').each(function() {
if($(this).attr('class').indexOf(class_is)!==-1) {
$(this).toggleClass('show');
$(this).siblings().removeClass('show');
}
})
});
Every advice is welcome.
Thanks

That could be done using just removeClass()/addClass() with the help of rand() to generate random numbers, like :
Simple solution :
$('.button').click(function() {
var global_selector = $("[class^='pop_']");
var random = Math.floor(Math.random() * global_selector.length) + 1;
global_selector.addClass("hide").removeClass("show");
$(".pop_" + random).removeClass("hide").addClass("show");
});
.info-msg,
.success-msg,
.warning-msg,
.error-msg {
margin: 10px 0;
padding: 10px;
border-radius: 3px 3px 3px 3px;
}
.info-msg {
color: #059;
background-color: #BEF;
}
.success-msg {
color: #270;
background-color: #DFF2BF;
}
.warning-msg {
color: #9F6000;
background-color: #FEEFB3;
}
.error-msg {
color: #D8000C;
background-color: #FFBABA;
}
/* Just for CodePen styling - don't include if you copy paste */
html {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin: 25px;
}
body {
width: 640px;
}
.hide {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">CLICK ME</div>
<div class="pop_1 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 1
</div>
</div>
</div>
</div>
<!-- end pop1 -->
<div class="pop_2 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 2
</div>
</div>
</div>
</div>
<div class="pop_3 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 3
</div>
</div>
</div>
</div>
Non-successive random solution (Avoiding successive random numbers):
var random = 1;
$('.button').click(function() {
var global_selector = $("[class^='pop_']");
random = generateNonSuccessiveRand(1, global_selector.length, random);
global_selector.addClass("hide").removeClass("show");
$(".pop_" + random).removeClass("hide").addClass("show");
});
function generateNonSuccessiveRand(min, max, previous) {
var rand = Math.floor(Math.random() * max) + min;
while (rand === previous) {
rand = Math.floor(Math.random() * max) + min
}
return rand;
}
.info-msg,
.success-msg,
.warning-msg,
.error-msg {
margin: 10px 0;
padding: 10px;
border-radius: 3px 3px 3px 3px;
}
.info-msg {
color: #059;
background-color: #BEF;
}
.success-msg {
color: #270;
background-color: #DFF2BF;
}
.warning-msg {
color: #9F6000;
background-color: #FEEFB3;
}
.error-msg {
color: #D8000C;
background-color: #FFBABA;
}
/* Just for CodePen styling - don't include if you copy paste */
html {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
margin: 25px;
}
body {
width: 640px;
}
.hide {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">CLICK ME</div>
<div class="pop_1 hide">
<div class="error-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 1
</div>
</div>
</div>
</div>
<!-- end pop1 -->
<div class="pop_2 hide">
<div class="success-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 2
</div>
</div>
</div>
</div>
<div class="pop_3 hide">
<div class="info-msg">
<span class="close">×</span>
<div class="success-inner">
<div class="popup-info-text">
<h2>Title</h2>
<p>Hello World</p>
</div>
<div class="play-btn">
Redeem it now 3
</div>
</div>
</div>
</div>

There is a million ways to achieve this... Basically, you need a way to identify which 'pop' you want to display, obviously lol.
Here is a simple pen showing the most basic way of doing it. It uses a variable to keep a count of each time the button div is clicked and used as the index to determine which 'pop' to show.
https://codepen.io/jthomas077/pen/BOemQQ
var popCntr = 0;
$('.button').on('click touchend', function (e)
{
$('.pop').hide().eq(popCntr).show();
popCntr++;
$('.pop-cntr').html(popCntr);
e.preventDefault();
});

How to make divs invisible from javascript for?

So I have the next code:
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
// div[i].style.display = "";
} else {
li[i].style.display = "none";
//div[i].style.display = "none";
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebSite</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
* {
box-sizing: border-box;
}
#networdapp {
display: none;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
/* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name" type="search" placeholder="Search">
</form>
<div id="test" class="networdapp">
<div class="container" id="test2">
<ul id="myUL">
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6">
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center">
<li>Adele</li>
</div>
<div class="card-body" style="height:200px">
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
<div id="test" class="networdapp">
<div class="container" id="test2">
<ul id="myUL">
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6">
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center">
<li>Agnes</li>
</div>
<div class="card-body" style="height:200px">
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
<div id="test" class="networdapp">
<div class="container" id="test2">
<ul id="myUL">
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6">
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center">
<li>Billy</li>
</div>
<div class="card-body" style="height:200px">
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
<div id="test" class="networdapp">
<div class="container" id="test2">
<ul id="myUL">
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6">
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center">
<li>Bob</li>
</div>
<div class="card-body" style="height:200px">
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</body>
</html>
What I want to do is to display some divs depending on the input from that input box.What I've done so far is to display only the "li" tags but what I actually want is to display the entire div not only the "li" depending on the input data the divs must be displayed or not.
Shown above is my code right now.
Thank you in advance!

While you are showing your "LI", there you can show it's parent DIV by using "parentElement". Please check below snippet.
Your code
li[i].style.display = "none";
li[i].style.display = "";
New Code
li[i].parentElement.style.display = "none";
li[i].parentElement.style.display = "";

Thank you all for help!Problem solved now.I just used a JQuery parser for div and everything worked pretty well.

You should tidy up your html with respect of the repeated IDs and the <li>s not being direct children if <ul>.
Having done that #Ambuj Khanna's advice should be helpful. You might have to apply parentElement repeatedly.
It occurred to me that the whole operation is something that could have been done using jQuery in two lines:
var flt=$('#myInput').val().toUpperCase();
$('#myUl>div').each(function(i,div){$(div).toggle($('li',div).text().toUpperCase()==flt)})
The above should make the top level divs - just below your <ul#myUl> - visible and hide all others. However, the element below a <ul> should always be a <li> element.

Image slider using css and javascript

I'm new to JavaScript/JQuery. I'm trying to implement a image slider using only CSS and Jquery. When clicked on one slider's navigation, elements of other slider also starts moving. If i use separate Id for each slider then it works fine, but I don't want to use separate Id for each slider. How I will detect which slider's navigation is clicked and move elements accordingly.
Thanks in advance!!
Here is Demo
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="outer_pro_layer">
<div class="presentation">
<button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
<div class="live">
<div class="ul">
<div class="col-sm-3 li">
<div>1</div>
</div>
<div class="col-sm-3 li">
<div>2</div>
</div>
<div class="col-sm-3 li">
<div>3</div>
</div>
<div class="col-sm-3 li">
<div>4</div>
</div>
<div class="col-sm-3 li">
<div>5</div>
</div>
<div class="col-sm-3 li">
<div>6</div>
</div>
</div>
</div>
<button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
</div>
</div>
<div class="outer_pro_layer">
<div class="presentation">
<button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
<div class="live">
<div class="ul">
<div class="col-sm-3 li">
<div>A</div>
</div>
<div class="col-sm-3 li">
<div>B</div>
</div>
<div class="col-sm-3 li">
<div>C</div>
</div>
<div class="col-sm-3 li">
<div>D</div>
</div>
<div class="col-sm-3 li">
<div>E</div>
</div>
<div class="col-sm-3 li">
<div>F</div>
</div>
</div>
</div>
<button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
</div>
</div>
</div>
</div>
</div>
CSS
.sr {
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
.ul {
overflow:hidden;
height:100px;
}
.li {
display: inline-block;
text-align:center;
height:100px;
background:#ccc;
}
.js #live {
display:none;
}
Jquery
$(document).ready(function() {
var slidestash;
var lastindex = $(".live .ul .li").length - 1;
var numstashed = 2;
function setup() {
$(".live")
.attr('aria-label', "Rotating list of statistics")
.attr('aria-live', 'polite')
.attr('aria-relevant', 'additions')
.attr('aria-atomic', 'false');
slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")").detach();
}
setup();
$("html").removeClass("js");
$(".prev").click(function() {
$(".live .ul").prepend(slidestash);
slidestash = $(".live .ul .li:nth-child(n+" + lastindex + ")").detach();
if (!$(this).is(":focus")) $(this).focus(); //iOS hack
});
$(".next").click(function() {
$(".live .ul").append(slidestash);
slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")").detach();
if (!$(this).is(":focus")) $(this).focus(); //iOS hack
})
});

What you want to do here is
place all the code for running a slider in a single function
run that function on each of your slider instances
limit the code from one instance to apply inside that element only.
First two points are easy:
1.
function initSlider(e) {
..code here...
}
2.
$('presentation').each(function(i,e) {
initSlider(e);
})
For 3, you need to pass the instance - $(e) - to all jQuery selectors in your function, as the second param (delimiter), to tell jQuery: "only select inside this element".
For example, $(".live") will become $(".live", $(e)).
Here it is, working:
$(window).on('load', function() {
$("html").removeClass("js");
$('.presentation').each(function(i, e) {
initSlider(e);
});
function initSlider(e) {
var slidestash,
lastindex = $(".live .ul .li", $(e)).length - 1,
numstashed = 2;
function setup() {
$(".live", $(e))
.attr('aria-label', "Rotating list of statistics")
.attr('aria-live', 'polite')
.attr('aria-relevant', 'additions')
.attr('aria-atomic', 'false');
slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")", $(e)).detach();
}
setup();
$(".prev", $(e)).click(function() {
$(".live .ul", $(e)).prepend(slidestash);
slidestash = $(".live .ul .li:nth-child(n+" + lastindex + ")", $(e)).detach();
if (!$(this).is(":focus")) $(this).focus(); //iOS hack
});
$(".next", $(e)).click(function() {
$(".live .ul", $(e)).append(slidestash);
slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")", $(e)).detach();
if (!$(this).is(":focus")) $(this).focus(); //iOS hack
})
}
})
.sr {
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
.ul {
overflow:hidden;
height:100px;
}
.li {
display: inline-block;
text-align:center;
height:100px;
background:#ccc;
}
.js #live {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="outer_pro_layer">
<div class="presentation">
<button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
<div class="live">
<div class="ul">
<div class="col-sm-3 li">
<div>1</div>
</div>
<div class="col-sm-3 li">
<div>2</div>
</div>
<div class="col-sm-3 li">
<div>3</div>
</div>
<div class="col-sm-3 li">
<div>4</div>
</div>
<div class="col-sm-3 li">
<div>5</div>
</div>
<div class="col-sm-3 li">
<div>6</div>
</div>
</div>
</div>
<button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
</div>
</div>
<div class="outer_pro_layer">
<div class="presentation">
<button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
<div class="live">
<div class="ul">
<div class="col-sm-3 li">
<div>A</div>
</div>
<div class="col-sm-3 li">
<div>B</div>
</div>
<div class="col-sm-3 li">
<div>C</div>
</div>
<div class="col-sm-3 li">
<div>D</div>
</div>
<div class="col-sm-3 li">
<div>E</div>
</div>
<div class="col-sm-3 li">
<div>F</div>
</div>
</div>
</div>
<button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
</div>
</div>
</div>
</div>
</div>
As you can see, the JavaScript now works correctly. If you need more help with it, please turn your code into a live snippet, so I can see what I'm doing and how it's supposed to look.

You are on the right track, but you need to limit the context of the elements. for example, prev button should only affect the slider that the button is contained within.
For this, you can use the .container element as the root of a slider, and search for the elements inside it.
For example:
$(".prev").click(function() {
var container = $(this).parents(".outer_pro_layer").first();
// or $(this).closest(".outer_pro_layer") or $(this).parent(".outer_pro_layer")
container.find(".live .ul").prepend(slidestash);
slidestash = container.find(".live .ul .li:nth-child(n+"+lastindex+")").detach();
if (!$(this).is(":focus")) $(this).focus(); //iOS hack
});

positioning div classes next to another div using jquery

below is my current html layout, inside my .container class I have two <span> tags with classes of .download-btn and .save-btn. I want, whenever page load, remove those <span> from there and postioning near <div class="share"></div>
tag.
current layout
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
expected layout when page load
<div class="container">
<div class="col-md-6 col-center">
</div>
<div id="options">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
<div class="share"></div>
</div>
</div>
pls advice how to proceed using js ?

Using jQuery,
It can be done in a one line of code.
$("#options").prepend($(".save-btn")).prepend($(".download-btn"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
</div>

Use prepend() to move the buttons to the beginning of the element with ID options:
$('#options').prepend($('.download-btn, .save-btn'));

In this example I'm removing this two buttons from their places, and append them before <div class="share"></div> (and I have added content "share" to this div to see the difference):
var downloadBtn = $('.download-btn');
var saveBtn = $('.save-btn');
$('.share').before(saveBtn).before(downloadBtn);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share">share</div>
</div>

Use button for for the buttons. It's semantically correct and accessible.
$(window).on('load', function() {
var download = $('.download-btn'),
save = $('.save-btn'),
options = $('#options');
download.remove();
save.remove();
options.prepend(download, save);
});
.container {
border: .1rem solid red;
min-height: 5rem;
margin-bottom: 1rem;
}
#options {
border: .1rem solid blue;
min-height: 100px;
}
button {
padding: 1rem;
background-color: #ddd;
display: inline-block;
margin: .5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<button class="download-btn">download</button>
<button class="save-btn">save</button>
</div>
</div>
<div id="options">
<div class="share"></div>
</div>

Simple sort DIV by name, and number

I want to sort my div using vanilla JS by name and number. Before i sorting only list, and this is not a problem, but here i have a problem how to do this.
Maybe need create object, and save all value to him, and then sorting object?
Now i trying loop or items, but i can't get item-price or item-name in 'item'
var sortByNameBtn = document.getElementById('sortByName');
var sortByPriceBtn = document.getElementById('sortByPrice');
function sortingByName(){
var items = document.querySelectorAll('.item');
}
function sortingByPrice(){
var items = document.querySelectorAll('.item');
}
sortByNameBtn.addEventListener('click', sortingByName);
sortByPriceBtn.addEventListener('click', sortingByPrice);
.item {
background: #eee;
padding: 10px;
margin-bottom: 10px;
font-size: 20px;
display: inline-block;
border: 1px solid black;
}
<div class="items">
<div class="item">
<div class="item-price">12321</div>
<div class="item-name">Car</div>
</div>
<div class="item">
<div class="item-price">123</div>
<div class="item-name">Table</div>
</div>
<div class="item">
<div class="item-price">88</div>
<div class="item-name">Toys</div>
</div>
<div class="item">
<div class="item-price">1223</div>
<div class="item-name">Window</div>
</div>
<div class="item">
<div class="item-price">19</div>
<div class="item-name">Bad</div>
</div>
<div class="item">
<div class="item-price">50</div>
<div class="item-name">Mouse</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">iPhone</div>
</div>
<div class="item">
<div class="item-price">100</div>
<div class="item-name">Mobile</div>
</div>
<div class="item">
<div class="item-price">12</div>
<div class="item-name">Cake</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">Laptop</div>
</div>
</div>
<p>
<button id="sortByName">Sort by name</button>
</p>
<p>
<button id="sortByPrice">
Sort By price
</button>
</p>

Using flexbox for this could be useful cuz you can rearrange them with order, and it will save you a lot of re-rendering and moving bit's and pieces
Doe the flex layout will make it behave a little differently. So you might have to fix the css a bit.
Also the tab index might not be what you expect if you have inputs and what not.
var sortByNameBtn = document.getElementById('sortByName');
var sortByPriceBtn = document.getElementById('sortByPrice');
function sortingByName() {
var items = document.querySelectorAll('.item');
// get all items as an array and call the sort method
Array.from(items).sort(function(a, b) {
// get the text content
a = a.querySelector('.item-name').innerText.toLowerCase()
b = b.querySelector('.item-name').innerText.toLowerCase()
return (a > b) - (a < b)
}).forEach(function(n, i) {
n.style.order = i
})
}
function sortingByPrice(){
var items = document.querySelectorAll('.item')
Array.from(items).sort(function(a, b) {
// using ~~ to cast the value to a number instead of a string
a = ~~a.querySelector('.item-price').innerText
b = ~~b.querySelector('.item-price').innerText
return a - b
}).forEach(function(n, i) {
n.style.order = i
})
}
sortByNameBtn.addEventListener('click', sortingByName);
sortByPriceBtn.addEventListener('click', sortingByPrice);
.items {
display: flex;
}
.item {
background: #eee;
padding: 10px;
margin-bottom: 10px;
font-size: 20px;
display: inline-block;
border: 1px solid black;
}
<div class="items">
<div class="item">
<div class="item-price">12321</div>
<div class="item-name">Car</div>
</div>
<div class="item">
<div class="item-price">123</div>
<div class="item-name">Table</div>
</div>
<div class="item">
<div class="item-price">88</div>
<div class="item-name">Toys</div>
</div>
<div class="item">
<div class="item-price">1223</div>
<div class="item-name">Window</div>
</div>
<div class="item">
<div class="item-price">19</div>
<div class="item-name">Bad</div>
</div>
<div class="item">
<div class="item-price">50</div>
<div class="item-name">Mouse</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">iPhone</div>
</div>
<div class="item">
<div class="item-price">100</div>
<div class="item-name">Mobile</div>
</div>
<div class="item">
<div class="item-price">12</div>
<div class="item-name">Cake</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">Laptop</div>
</div>
</div>
<p>
<button id="sortByName">Sort by name</button>
</p>
<p>
<button id="sortByPrice">
Sort By price
</button>
</p>