jQuery - ordering divs in ascending order - javascript

So I have this code
var $divs = $("div.product");
$('#priceAscending').on('click', function() {
var ascendingOrderedDivs = $divs.sort(function(a, b) {
return $(a).find("div.price").text() > $(b).find("div.price").text();
});
$("#container").html(ascendingOrderedDivs);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<button id="priceAscending">Price ascending</button>
<!--<button id="priceDescending">Price descending</button>-->
<div id="container">
<div class="product">
<span id="name">Product One</span>
<div class="price">14.85$</div>
</div>
<div class="product">
<span id="name">Product Two</span>
<div class="price">27.59$</div>
</div>
<div class="product">
<span id="name">Product Three</span>
<div class="price">2.64$</div>
</div>
</div>
</div>
I want to sort div.product in ascending order based on the price, but it doesn't work. It puts 2.64 in the middle but it should put it first.
How can I fix this issue using jQuery?


You need to change > to -
return $(a).find("div.price").text() - $(b).find("div.price").text();
You also need to remove $ from price to compare the values. You can do it with str.slice(0, -1)
return $(a).find("div.price").text().slice(0, -1) - $(b).find("div.price").text().slice(0, -1);
Here is a working JSFiddle


I suggest using the numeric value instead of the string
var divs = $("div.product");
$('#priceAscending').on('click', function() {
var ascendingOrderedDivs = divs.sort(function(a, b) {
var aVal = parseFloat($(a).find("div.price").text().replace("$",""));
var bVal = parseFloat($(b).find("div.price").text().replace("$",""));
return aVal - bVal;
});
$("#container").html(ascendingOrderedDivs);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<button id="priceAscending">Price ascending</button>
<!--<button id="priceDescending">Price descending</button>-->
<div id="container">
<div class="product">
<span id="name">Product One</span>
<div class="price">14.85$</div>
</div>
<div class="product">
<span id="name">Product Two</span>
<div class="price">27.59$</div>
</div>
<div class="product">
<span id="name">Product Three</span>
<div class="price">2.64$</div>
</div>
</div>
</div>


You could replace the $ at the end of the prices with an empty string and use parseFloat to compare the values. Note that id's on the page should be unique. For all the spans you use id="name
var $divs = $("div.product");
$('#priceAscending').on('click', function() {
var ascendingOrderedDivs = $divs.sort(function(a, b) {
return parseFloat($(a).find("div.price").text().replace(/\$$/, '')) - parseFloat($(b).find("div.price").text().replace(/\$$/, ''));
});
$("#container").html(ascendingOrderedDivs);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<button id="priceAscending">Price ascending</button>
<!--<button id="priceDescending">Price descending</button>-->
<div id="container">
<div class="product">
<span id="name">Product One</span>
<div class="price">14.85$</div>
</div>
<div class="product">
<span id="name">Product Two</span>
<div class="price">27.59$</div>
</div>
<div class="product">
<span id="name">Product Three</span>
<div class="price">2.64$</div>
</div>
</div>
</div>

Related

How to hide product item if the price is 0

Some of my products have 0 price. Until I fix this issue I want to hide those products from
collection pages.
So,
How can I hide the .productItem or .ItemOrj if the .productPrice span is == ₺0,00 , else show
Look code below:
<div id="ProductPageProductList" class="ProductList sort_4">
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.950,00
</span>
</div>
</div>
</div>
</div>
</div>
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.250,00
</span>
</div>
</div>
</div>
</div>
</div>
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺0,00
</span>
</div>
</div>
</div>
</div>
</div>
</div>
I have also tried but not worked:
var amount = parseFloat($('.productPrice span').html().replace(",", "."));
if(amount === 0){
$('.productItem').css("display", "none");
}else{
$('.productItem').css("display", "block");
}

I stripped out the additional HTML for my answer since it doesn't affect my answer.
But I loop through each item, and get the text value of the productPrice div and strip out all numeric values then parse it to a Float. Then if its under 0, I hide the parent productItem.
$(document).ready(function(){
$(".productItem").each(function(){
let price = parseFloat($(this).find(".productPrice").text().replace(/[^0-9]/g,""));
if(price == 0){
$(this).hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productItem">
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.250,00
</span>
</div>
</div>
</div>
<div class="productItem">
<div class="productPrice ">
<div class="discountPrice">
<span>
₺0
</span>
</div>
</div>
</div>

Jquery - each get value, Find difference and convert to array

Used below HTML & JS code to get each value of base currency and member currency.
Need to get Memberprice value by finding a difference between base currency - member currency. Some times member-price will not exist. If condition to check and remove that base-currency from display. Then convert memberprice each value in array.
But, below code.. str1 & str2 outputs are coming as expected. But, memberprice difference get only first value. Not all.
Please help to guide and get a output in array format of extracted value like below based on example HTML shared.
[275, 258, 365, 348, 460] -- 500 will be not there as there is no member-price div
var str1 = "";
var str2 = "";
var memberprice = "";
var arrayKeys = [];
var titleKeys = [];
var title = "";
$('.list-item').each(function(){
str1 += $(this).find('.right-container .base-currency .price').attr('data-base-price') + ",";
str2 += $(this).find('.right-container .member-currency .price').attr('data-base-price') + ",";
console.log('str1: ', str1);
console.log('str2: ', str2);
memberprice += str1 - str2;
console.log(memberprice);
title += $(this).find('.left-container h3').html() + ",";
// need to insert these values in array get memberprice -> str1 - str2. If membercurrency exists minus. Other display only basecurrency.
//output have to be like [275, 258, 365, 348, 500, 460]
arrayKeys.push(memberprice);
//Title in array
titleKeys.push(title);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-item">
<div class="left-container">
<h3>Product Title 1</h3>
Title 1 Link
</div>
<div class="right-container">
<div class="price-list">
<div class="base-currency">
<div class"price" data-base-currency='300'>300 USD</div>
</div>
<div class="member-currency">
<div class"price" data-base-currency='25'>25 USD</div>
</div>
</div>
<div class="price-list">
<div class="base-currency">
<div class"price" data-base-currency='280'>280 USD</div>
</div>
<div class="member-currency">
<div class"price" data-base-currency='22'>22 USD</div>
</div>
</div>
</div>
</div>
<div class="list-item">
<div class="left-container">
<h3>Product Title 2</h3>
Title 2 Link
</div>
<div class="right-container">
<div class="price-list">
<div class="base-currency">
<div class"price" data-base-currency='400'>400 USD</div>
</div>
<div class="member-currency">
<div class"price" data-base-currency='35'>35 USD</div>
</div>
</div>
<div class="price-list">
<div class="base-currency">
<div class"price" data-base-currency='380'>380 USD</div>
</div>
<div class="member-currency">
<div class"price" data-base-currency='32'>32 USD</div>
</div>
</div>
</div>
</div>
<div class="list-item">
<div class="left-container">
<h3>Product Title 3</h3>
Title 3 Link
</div>
<div class="right-container">
<div class="price-list">
<div class="base-currency">
<div class"price" data-base-currency='500'>500 USD</div>
</div>
</div>
<div class="price-list">
<div class="base-currency">
<div class"price" data-base-currency='470'>470 USD</div>
</div>
<div class="member-currency">
<div class"price" data-base-currency='10'>10 USD</div>
</div>
</div>
</div>
</div>

You can loop through price-list div and get value from currency and base using find('.base-currency .price') same for other then subtract that values and add them inside arrays . Also , you need check if title already exist inside title array to avoid any duplicate.
Demo Code :
var str1 = "";
var str2 = "";
var memberprice = "";
var arrayKeys = [];
var titleKeys = [];
var title = "";
//loop through price list divss
$('.price-list').each(function() {
//get value from base & member if exist else take 0
str1 = ($(this).find('.base-currency .price').attr('data-base-currency')) ? parseInt($(this).find('.base-currency .price').attr('data-base-currency')) : 0;
str2 = ($(this).find('.member-currency .price').attr('data-base-currency')) ? parseInt($(this).find('.member-currency .price').attr('data-base-currency')) : 0;
console.log('str1: ', str1);
console.log('str2: ', str2);
memberprice = str1 - str2;
console.log(memberprice);
//get title
title = $(this).closest(".list-item").find('.left-container h3').html();
//check if member is not 0 (means not exist..)
if (str2 != 0) {
arrayKeys.push(memberprice);
}
//check if prduct name exist in title array
if ($.inArray(title, titleKeys) === -1) {
titleKeys.push(title); //push same
}
});
console.log(titleKeys)
console.log(arrayKeys)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-item">
<div class="left-container">
<h3>Product Title 1</h3>
Title 1 Link
</div>
<div class="right-container">
<div class="price-list">
<div class="base-currency">
<div class="price" data-base-currency='300'>300 USD</div>
</div>
<div class="member-currency">
<div class="price" data-base-currency='25'>25 USD</div>
</div>
</div>
<div class="price-list">
<div class="base-currency">
<div class="price" data-base-currency='280'>280 USD</div>
</div>
<div class="member-currency">
<div class="price" data-base-currency='22'>22 USD</div>
</div>
</div>
</div>
</div>
<div class="list-item">
<div class="left-container">
<h3>Product Title 2</h3>
Title 2 Link
</div>
<div class="right-container">
<div class="price-list">
<div class="base-currency">
<div class="price" data-base-currency='400'>400 USD</div>
</div>
<div class="member-currency">
<div class="price" data-base-currency='35'>35 USD</div>
</div>
</div>
<div class="price-list">
<div class="base-currency">
<div class="price" data-base-currency='380'>380 USD</div>
</div>
<div class="member-currency">
<div class="price" data-base-currency='32'>32 USD</div>
</div>
</div>
</div>
</div>
<div class="list-item">
<div class="left-container">
<h3>Product Title 3</h3>
Title 3 Link
</div>
<div class="right-container">
<div class="price-list">
<div class="base-currency">
<div class="price" data-base-currency='500'>500 USD</div>
</div>
</div>
<div class="price-list">
<div class="base-currency">
<div class="price" data-base-currency='470'>470 USD</div>
</div>
<div class="member-currency">
<div class="price" data-base-currency='10'>10 USD</div>
</div>
</div>
</div>
</div>

Clone one span into another for each group of div

I have many sets of div and I'm trying to copy the content of a specific span into another one and repeat the same operation for all my divs.
Here is my html code:
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 1</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 2</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 3</span>
</div>
</div>
And my jQuery code is:
$("div.item").each(function(i) {
$(this).find('span.ContentComesFromHere').clone(true, true).contents().appendTo('span.ContentGoesHere');
});
It almost works, right now what I get in my span.ContentGoesHere is: This is my content 1This is my content 2This is my content 3 - and it's the same content for all but the content needs to be specific to each div.item.
Thank you for your help.

Try The code below
$("div.item").each(function(i) {
$(this).find('span.ContentComesFromHere')
.clone(true,true).contents()
.appendTo($(this).find('span.ContentGoesHere'));
});
To See The demo in jsFiddle
Click here to see Demo In JsFiddle

Try the code bellow.
$("div.item").each(function(i) {
var content = $(this).find('span.ContentComesFromHere').html();
$(this).find('span.ContentGoesHere').html(content);
});

If you type your function like this:
$("div.item").each(function(i) {
let content = $(this).find('span.ContentComesFromHere');
let contentTarget = $(this).find('span.ContentGoesHere');
content.clone().appendTo(contentTarget);
});
Then the end result will looks like this:
This is my content 1
This is my content 1
This is my content 2
This is my content 2
This is my content 3
This is my content 3
See snippet for the working code.
$("div.item").each(function(i) {
let content = $(this).find('span.ContentComesFromHere');
let contentTarget = $(this).find('span.ContentGoesHere');
content.clone().appendTo(contentTarget);
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 1</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 2</span>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-12">
<span class="ContentGoesHere"></span>
</div>
</div>
<div class="DivWithContent">
<span class="ContentComesFromHere">This is my content 3</span>
</div>
</div>

See it working
Your way
$("div.item").each(function(i) {
var targetElement = $(this).find('span.ContentGoesHere');
var sourceHtml = $(this).find('span.ContentComesFromHere').clone().contents()
sourceHtml.appendTo(targetElement);
});
Simpler way
$("div.item").each(function(i) {
var contents = $(this).find('span.ContentComesFromHere').html();
$(this).find('span.ContentGoesHere').html(contents);
});
In your case you need find the source and target both by $(this).find()

Just replace to .appendTo($(this).find('span.ContentGoesHere')); into your JS code and I hope it will be work.

remove parent if no list element has children

On my Website I have a list with different classes which maybe have content or not. If all of them are empty the whole container should be removed, but if one or more have content inside, nothing should happen.
Code Snippets:
<div class="fts">
<div class="panel-heading">...</div>
<div class="panel-collapse">
<div class="panel-body">
<div class=" bd-layoutbox-16 clearfix">
<div class="bd-container-inner">
<h5>Heading 5</h5>
<div>...</div>
</div>
</div>
<div class=" bd-layoutbox-84 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-31 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-82 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-85 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-86 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-87 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-88 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-89 clearfix">
<div class="bd-container-inner"></div>
</div>
<div class=" bd-layoutbox-90 clearfix">
<div class="bd-container-inner"></div>
</div>
</div>
</div>
</div>
JS
$(".bd-layoutbox-84, .bd-layoutbox-31, .bd-layoutbox-82, .bd-layoutbox-85, .bd-layoutbox-86, .bd-layoutbox-87, .bd-layoutbox-88, .bd-layoutbox-89, .bd-layoutbox-90")
.each(function(){
if($(this).has("h5").length == 0){
$(this).parent().parent().parent().remove();
}
});
What's the problem?
Thanks for help.

You may need to rework your logic a bit by creating a function, but here's a thought ..
var removethis=1;
$(".bd-layoutbox-84, .bd-layoutbox-31, .bd-layoutbox-82, .bd-layoutbox-85, .bd-layoutbox-86, .bd-layoutbox-87, .bd-layoutbox-88, .bd-layoutbox-89, .bd-layoutbox-90")
.each(function(){
if($(this).has("h5").length > 0){
removethis = 0;
}
});
if (removethis == 1) {
// remove parent item here
}

You can use contains selector to check any content there or not and then remove it. Below is the code
$('div.fts').each(function() {
var $this = $(this);
if ($this.find('div[class*="bd-layoutbox-"] h5').length === 0) {
$this.remove();
}
});
Demo: https://jsfiddle.net/6bh0d9yo/1/

Javascript Sort not sorting correctly

I an issue with sorting div elements by price values. The functionality of the code works OK but it seems that it doesn't quite sort the numbers correctly.
As you can see from my jsfiddle when the button is pressed the number 21.35 comes after numbers 102.35 and 200.
Can anyone shed some light on this?
Here is the html
<div class="wrap">
<button id="numBnt">Numerical</button>
<div id="container">
<div class="box">
<h2>10.35</h2>
</div>
<div class="box">
<h2>21.35</h2>
</div>
<div class="box">
<h2>21.35</h2>
</div>
<div class="box">
<h2>102.35</h2>
</div>
<div class="box">
<h2>10.35</h2>
</div>
<div class="box">
<h2>10.35</h2>
</div>
<div class="box">
<h2>10.95</h2>
</div>
<div class="box">
<h2>100.35</h2>
</div>
<div class="box">
<h2>100.05</h2>
</div>
<div class="box">
<h2>200</h2>
</div>
<div class="box">
<h2>5,510.25</h2>
</div>
</div>
</div>
And the javascript
var $divs = $("div.box");
$('#numBnt').on('click', function () {
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return $(a).find("h2").text() > $(b).find("h2").text();
});
$("#container").html(numericallyOrderedDivs);
});
And here is the jsfiddle.
http://jsfiddle.net/C2heg/370/

The reason you're getting these results is that your sort is not numeric, it is based upon canonical values of the numbers.
The reason why 21.35 comes after number 102.35 is because the digit 1 in 102.35 is smaller than the digit 2 in 21.35 and 0 in 200 is smaller than 1 in 21.35.
Fix:
Parse to the numbers to float , before sorting
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return parseFloat($(a).find("h2").text()) > parseFloat($(b).find("h2").text());
});
Updated fiddle

You need to parse to the numbers, use parseFloat.
You need to remove , from the text.
Code:
var numericallyOrderedDivs = $divs.sort(function (a, b) {
return parseFloat($(a).find("h2").text().replace(/,/g, '')) > parseFloat($(b).find("h2").text().replace(/,/g, ''));
});
jsfiddle Demo
Demo:
var $divs = $("div.box");
$('#numBnt').on('click', function() {
var numericallyOrderedDivs = $divs.sort(function(a, b) {
return parseFloat($(a).find("h2").text()) > parseFloat($(b).find("h2").text());
});
$("#container").html(numericallyOrderedDivs);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="wrap">
<button id="numBnt">Numerical</button>
<div id="container">
<div class="box">
<h2>10.35</h2>
</div>
<div class="box">
<h2>21.35</h2>
</div>
<div class="box">
<h2>21.35</h2>
</div>
<div class="box">
<h2>102.35</h2>
</div>
<div class="box">
<h2>10.35</h2>
</div>
<div class="box">
<h2>10.35</h2>
</div>
<div class="box">
<h2>10.95</h2>
</div>
<div class="box">
<h2>100.35</h2>
</div>
<div class="box">
<h2>100.05</h2>
</div>
<div class="box">
<h2>200</h2>
</div>
<div class="box">
<h2>5510.25</h2>
</div>
</div>
</div>

Categories

Resources