So i'm making a post request and the response is a string of html and i'm trying to get the data from the "dropUser" part of the html string but i'm having a little trouble and was hoping maybe someone could help me or point me in the right direction.
My goal is to get the data from the "dropUser" html string and push them to an array.
For an example the ID 4289985, and username 'MeowCat i want to get all of them and push to an array.
let str = `<div id="container_user">
<div class="user_count">
<div class="bcell">
Online <span class="ucount back_theme">4</span>
</div>
</div>
<div class="online_user">
<div onclick="dropUser(this,5,'ChatAveBot',1,1,'ZZ','','0','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex " src="/avatar/default_avatar.png" /> </div>
<div class="user_item_data">
<p class="username user ">ChatAveBot</p>
</div>
<div class="user_item_icon icrank"><img src="default_images/rank/bot.svg" class="list_rank" title="Bot" /></div>
</div>
<div onclick="dropUser(this,3754679,'Fantastic',1,0,'ZZ','','14','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex " src="/avatar/avatar_user3754679_1638955491.jpg" /> </div>
<div class="user_item_data">
<p class="username bcolor1 bnfont7">Fantastic</p>
<p class="text_xsmall bustate bellips">TheDD7デイビスになる =🚮</p>
</div>
</div>
<div onclick="dropUser(this,4290052,'cefefef',0,0,'AU','','13','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex " src="/avatar/default_guest.png" /> </div>
<div class="user_item_data">
<p class="username user ">cefefef</p>
</div>
</div>
<div onclick="dropUser(this,4289985,'MeowCat',0,0,'AU','','13','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex glob_av" src="/avatar/default_guest.png" /> </div>
<div class="user_item_data">
<p class="username user ">MeowCat</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>`;
let data = [];
//let info = str.split(`'`).forEach(e => e.includes("dropUser"));
console.log(str.split(`'`));
try this:
const htmlStr = `<div id="container_user">
<div class="user_count">
<div class="bcell">
Online <span class="ucount back_theme">4</span>
</div>
</div>
<div class="online_user">
<div onclick="dropUser(this,5,'ChatAveBot',1,1,'ZZ','','0','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex " src="/avatar/default_avatar.png" /> </div>
<div class="user_item_data">
<p class="username user ">ChatAveBot</p>
</div>
<div class="user_item_icon icrank"><img src="default_images/rank/bot.svg" class="list_rank" title="Bot" /></div>
</div>
<div onclick="dropUser(this,3754679,'Fantastic',1,0,'ZZ','','14','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex " src="/avatar/avatar_user3754679_1638955491.jpg" /> </div>
<div class="user_item_data">
<p class="username bcolor1 bnfont7">Fantastic</p>
<p class="text_xsmall bustate bellips">TheDD7デイビスになる =🚮</p>
</div>
</div>
<div onclick="dropUser(this,4290052,'cefefef',0,0,'AU','','13','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex " src="/avatar/default_guest.png" /> </div>
<div class="user_item_data">
<p class="username user ">cefefef</p>
</div>
</div>
<div onclick="dropUser(this,4289985,'MeowCat',0,0,'AU','','13','');" class="avtrig user_item ">
<div class="user_item_avatar"><img class="avav acav avsex nosex glob_av" src="/avatar/default_guest.png" /> </div>
<div class="user_item_data">
<p class="username user ">MeowCat</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>`;
function getUsers(str) {
let div = document.createElement("div");
div.innerHTML = str;
return [...div.querySelectorAll('.user_item')].map(item => {
let id = item.getAttribute('onclick').split(',')[1];
let username = item.querySelector('.username').innerHTML;
return {username, id};
})
};
console.log(getUsers(htmlStr));
I have added two new attribute to each user_item Div instade of reading from html string as text. find data-id in this html.
let str =`<div id="container_user">
<div class="user_count">
<div class="bcell">
Online <span class="ucount back_theme">4</span>
</div>
</div>
<div class="online_user">
<div onclick="dropUser(this,5,'ChatAveBot',1,1,'ZZ','','0','');" class="avtrig user_item " data-id="1" data-name="ChatAveBot">
<div class="user_item_avatar"><img class="avav acav avsex nosex " src="/avatar/default_avatar.png" /> </div>
<div class="user_item_data">
<p class="username user ">ChatAveBot</p>
</div>
<div class="user_item_icon icrank"><img src="default_images/rank/bot.svg" class="list_rank" title="Bot" /></div>
</div>
</div>
<div class="clear"></div>
</div>`;
Here is the Script to push all to in array
const Users = [];
$.each($(str).find('.user_item'), (userIndex, User) => {
let _user = {};
_user.id = $(User).attr('data-id');
_user.Name = $(User).attr('data-name');
Users.push(_user);
});
One solution I can suggest, as the original post has asked that the arguments passed to the dropUser function needs to be pushed in to an array. This solution is using regex and small string manipulations.
var regex=/dropUser\([A-Za-z0-9,'"]*\)/g;
var result=str.match(regex);
var argumentsArray = new Array();
result.forEach(input =>{ input = input.replace("dropUser(",""); input = input.replace('\)',''); argumentsArray.push(input) })
console.log(argumentsArray) //this will be a 2D array.
after this you should be able to extract the username and id, rather than reading from the .username label.
Related
I have 2 columns with same ID, each have 1 button. How to run a function when one button is clicked without changing other ID values?
Here is my code:
<div class="row">
<!--- column 1 ------>
<div class="column nature">
<div class="content">
<img src="images/pic.jpg" alt="Jane" style="width:100%">
<div class="container">
<p class="title" style="text-align:center;">SCA5-01</p>
<div style="text-align:center;">
<div id="hrg" style="font-size:5vw;font-weight:bold;">2000</div>
<div id="per">/500</div>
</div>
<div style="width:100%;margin:0px 5%;display:block;">
<div style="font-size:2vw;">
<br>Spect :
<br>- New
<br>- Fresh
</div>
</div>
<p>
<div style="width:100%;margin:0px auto;text-align:center;">
<input id="jmlh" type="number" value="500" style="width:50%;">
<button onclick="price();">chek</button>
</div>
</p>
<p>
<button class="button">Order</button>
</p>
</div>
</div>
</div>
<!--- column 1 ------>
<div class="column nature">
<div class="content">
<img src="images/pic.jpg" alt="Jane" style="width:100%">
<div class="container">
<p class="title" style="text-align:center;">SCA5-01</p>
<div style="text-align:center;">
<div id="hrg" style="font-size:5vw;font-weight:bold;">2000</div>
<div id="per">/500</div>
</div>
<div style="width:100%;margin:0px 5%;display:block;">
<div style="font-size:2vw;">
<br>Spect :
<br>- New
<br>- Fresh
</div>
</div>
<p>
<div style="width:100%;margin:0px auto;text-align:center;">
<input id="jmlh" type="number" value="500" style="width:50%;">
<button onclick="price();">chek</button>
</div>
</p>
<p>
<button class="button">Order</button>
</p>
</div>
</div>
</div>
</div>
Here is my function:
<script>
function price(){
var qty = document.getElementById("jmlh").value;
var prc = Math.ceil((1000000 / qty)/100)*100;
document.getElementById("hrg").innerHTML = prc;
document.getElementById("per").innerHTML = "/" + qty;
}
</script>
The problem here is that function only runs on 'column 1' & doesn't work on 'column 2'.
Where exactly am I going wrong?
id should be unique in the same document. Use classes or other attributes instead of id.
If you want centralized function to handle clicks, submit the clicked element itself to that function, so it would know which column was clicked:
<div class="column nature">
<div class="content">
<img src="images/pic.jpg" alt="Jane" style="width:100%">
<div class="container">
<p class="title" style="text-align:center;">SCA5-01</p>
<div style="text-align:center;">
<div class="hrg" style="font-size:5vw;font-weight:bold;">2000</div>
<div class="per">/500</div>
</div>
<div style="width:100%;margin:0px 5%;display:block;">
<div style="font-size:2vw;">
<br>Spect :
<br>- New
<br>- Fresh
</div>
</div>
<p>
<div style="width:100%;margin:0px auto;text-align:center;">
<input class="jmlh" type="number" value="500" style="width:50%;">
<button onclick="price(this);">chek</button>
</div>
</p>
<p>
<button class="button">Order</button>
</p>
</div>
</div>
</div>
function price(el){
const elContainer = el.closest(".container");// find parent
var qty = elContainer.querySelector(".jmlh").value;
var prc = Math.ceil((1000000 / qty)/100)*100;
elContainer.querySelector(".hrg").innerHTML = prc;
elContainer.querySelector(".per").innerHTML = "/" + qty;
}
Note, that all id were replaced by class attribute and in javascript instead of searching entire document with document.getElementById() it's now only searching children inside the .container element.
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>
I have dropdown list with some file names.
What I want to achieve is to find file name parents so when checkbox is checked I can get their respective values and build them into path of some sort. For example you are clicking
updates > second_folder_updates > CSD_update checkbox
on that CSD_update checbox click you can see updates/second_folder_updates/CSD_update being console logged, same goes for first update on click you will get updates/first_update in the console
my current solution it works in a way? but this returns a lot of duplicates and incorrect data
var elem = document.getElementById("AQW_update");
function getParents(elem) {
var parents = [];
while(elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'body') {
elem = elem.parentNode;
parents.push(elem.textContent);
}
return parents;
}
var abc = getParents(elem)
for(var i = 0; i < abc.length; ++i)
abc[i] = abc[i].replace(/(\r\n|\n|\r)/gm,"")
console.log(abc.toString())
$(document).ready(function () {
$('.clickFaq').click(function () {
$('.displayDir').toggle('1000');
$("i", this).toggleClass("icon-up-circled icon-down-circled");
var $data = $('.SWCheckBox:checked').val();
console.log($data)
});
$(".open").hide();
$('.dirTitle').click(function () {
$(this).next().slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
first_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
second_folder_updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
AQW_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox" >
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
CSD_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>
Hi I created an product page with two filter - price range and checkboxes. I am able to run both filter separately, but when I tried to combine both filters, one overlaps the others. I was searching in the internet but I couldn't really find a solution. Is there a way I can filter products with two different filters The codes below are my product page and my javascript codes
product.php
// CHECKBOXES
// CHECKBOXES
var $filterCheckboxes = $('input[type="checkbox"]');
var filterFunc = function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $('.productFilter');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$('.productFilter').hide().filter($filteredResults).show();
}
$filterCheckboxes.on('change', filterFunc);
// CHECKBOXES
// CHECKBOXES
// PRICE RANGE
// PRICE RANGE
$('#price_range').slider({
range:true,
min:0,
max:1000,
values:[0, 1000],
step:50,
slide: function(e, ui) {
$('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
var min = Math.floor(ui.values[0]);
$('#hidden_minimum_price').html(min + 'm');
var max = Math.floor(ui.values[1]);
$('#hidden_maximum_price').html(max + '.');
$('.productFilter').each(function() {
var minPrice = (min);
var maxPrice = (max);
var value = $(this).data('start-price');
if ((parseInt(maxPrice) >= parseInt(value) && (parseInt(minPrice) <= parseInt(value))) ){
$(this).show();
} else {
$(this).hide();
}
});
}
});
// PRICE RANGE
// PRICE RANGE
<div class="list-group">
<h3>Price</h3>
<input type="hidden" id="hidden_minimum_price" value="0" /> <!-- 'value' will not display anything - is used for function at line 191 -->
<input type="hidden" id="hidden_maximum_price" value="1000" /> <!-- 'value' will not display anything - is used for function at line 191 -->
<p id="price_show">0 - 1000</p>
<div id="price_range"></div>
</div>
<div class="list-group">
<h3>Type</h3>
<div style="height: 200px; overflow-y: auto; overflow-x: hidden;"> <!-- 'overflow-y' will create the vertical scroll effect when elements are outside the box/ 'overflow-x' will hide the horizontal elements outside the box -->
<div class="list-group-item checkbox">
<label><input type="checkbox"class="common_selector brand" value="Headphone_Speaker" id="Headphone_Speaker">Headphone & Speaker</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Chair" id="Chair">Chair</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Cabinet" id="Cabinet">Cabinet</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Table" id="Table">Table</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Box" id="Box">Box</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Headphone_Speaker" data-start-price="600">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-2.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>PAVILION SPEAKER</h3>
<span class="price">$600</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="780">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-3.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>LIGOMANCER</h3>
<span class="price">$780</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Cabinet" data-start-price="800">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-4.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>ALATO CABINET</h3>
<span class="price">$800</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Headphone_Speaker" data-start-price="100">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-5.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>EARING WIRELESS</h3>
<span class="price">$100</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Table" data-start-price="960">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-6.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>SCULPTURAL COFFEE TABLE</h3>
<span class="price">$960</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="540">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-7.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>THE WW CHAIR</h3>
<span class="price">$540</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Box" data-start-price="55">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-8.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>HIMITSU MONEY BOX</h3>
<span class="price">$55</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Box" data-start-price="99">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-9.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>ARIANE PRIN</h3>
<span class="price">$99</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="350">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-1.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>HAUTEVILLE CONCRETE ROCKING CHAIR</h3>
<span class="price">$350</span>
</div>
</div>
</div>
</div>
This is how my database/structure:
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>