I'm trying to get the parent element of cartError so I can access the particular cart-item-details where the cart-item-size and itm-quantity is... because I'm looping through the cart to if a new cart item is added with the same size increase quantity from 1 to 2
var cartItems = document.getElementsByClassName('side-cart- items')[0]
var cartItemSizes = cartItems.getElementsByClassName("cart-item-size")
for(var i=0; i < cartItemSizes.length;i++){
cartError=cartItemSizes[i]
if(cartError.innerText== size){
var cartItem = cartError.parentElement
var cartQuantity = cartError.getElementsByClassName('itm-quantity')
console.log(cartQuantity.innerText)
return
}
}
<div class="section side-cart-items">
<div class="side-cart-item">
<div class="cart-item-image">
<img src="./images/product/SASSI-HOLFORD-RTW-SS21-AQUAREMARINE-PEARL-DUNSTER-TOP-DUNSTER-SHORTS-2-1154x1600.jpg" alt="">
</div>
<div class="cart-item column">
<div class="cart-item-details">
<h2>Dunster Shorts</h2>
<p>size <span class="cart-item-size">36</span></p>
<p><span class="itm-quantity">1 </span>×<span class="itm-price">$285.00</span></p>
</div>
<button class="cart-item-remove">[ REMOVE ]</button>
</div>
</div>
<div class="side-cart-item">
<div class="cart-item-image">
<img src="./images/product/SASSI-HOLFORD-RTW-SS21-AQUAREMARINE-PEARL-DUNSTER-TOP-DUNSTER-SHORTS-2-1154x1600.jpg" alt="">
</div>
<div class="cart-item column">
<div class="cart-item-details">
<h2>Dunster Shorts</h2>
<p>size <span class="cart-item-size">40</span></p>
<p><span class="itm-quantity">1</span> ×<span class="itm-price">$200.00</span></p>
</div>
<button class="cart-item-remove">[ REMOVE ]</button>
</div>
</div>
</div>
Note that parent element of cartError is p tag not cart-item-details. Actually you need to use cartError.parentElement.parentElement to access the cart-item-details and then use cartItem.getElementsByClassName('itm-quantity'); to access the all itm-quantity tags:
var size = "36";
var cartItems = document.getElementsByClassName('side-cart-items')[0]
var cartItemSizes = cartItems.getElementsByClassName("cart-item-size");
for (var i = 0; i < cartItemSizes.length; i++) {
cartError = cartItemSizes[i]
if (cartError.innerText == size) {
var cartItem = cartError.parentElement.parentElement
var cartQuantity = cartItem.getElementsByClassName('itm-quantity');
for (let item of cartQuantity) {
console.log(item.innerText);
}
}
}
<div class="section side-cart-items">
<div class="side-cart-item">
<div class="cart-item-image">
<img src="./images/product/SASSI-HOLFORD-RTW-SS21-AQUAREMARINE-PEARL-DUNSTER-TOP-DUNSTER-SHORTS-2-1154x1600.jpg" alt="">
</div>
<div class="cart-item column">
<div class="cart-item-details">
<h2>Dunster Shorts</h2>
<p>size <span class="cart-item-size">36</span></p>
<p><span class="itm-quantity">1 </span>×<span class="itm-price">$285.00</span></p>
</div>
<button class="cart-item-remove">[ REMOVE ]</button>
</div>
</div>
<div class="side-cart-item">
<div class="cart-item-image">
<img src="./images/product/SASSI-HOLFORD-RTW-SS21-AQUAREMARINE-PEARL-DUNSTER-TOP-DUNSTER-SHORTS-2-1154x1600.jpg" alt="">
</div>
<div class="cart-item column">
<div class="cart-item-details">
<h2>Dunster Shorts</h2>
<p>size <span class="cart-item-size">40</span></p>
<p><span class="itm-quantity">1</span> ×<span class="itm-price">$200.00</span></p>
</div>
<button class="cart-item-remove">[ REMOVE ]</button>
</div>
</div>
</div>
Related
I'm new to coding and I have the following problem:
I created a random number and I have it in a p tag which has a class, then I tried to increment this number by clicking on a button. This is my code so far:
$(document).ready(function(){
let films = JSON.parse(movies);
for (let i = 0; i < films.length; i++){
let movie = `
<div class="container">
<div class="poster">
<img class="pic" src="${films[i].image}">
</div>
<div class="text-box">
<div class="details">
<h2>${films[i].title}</h2>
<p>${films[i].releaseDate}</p>
<p>Genre: ${films[i].genre}</p>
<p>Director: ${films[i].director}</p>
</div>
<div class="like-box">
<input type="button" class="btn" value="Like 👍" number="${i}"></input>
<p class="counter"></p>
</div>
</div>
</div>
`;
$("#main2").append(movie);
$(".counter").text(Math.floor((Math.random()*100) + 1));
}
$(".btn").click(function() {
let el = parseInt($(".counter").text());
$(".counter").text(el+1);
})
});
The problem is, that if I click on the button instead of getting for example: 19 then after the click 20, what I get is 191919191920. So basically the button works, but not exactly how I want it to work. Can anybody help me please?
for (let i = 0; i < films.length; i++){
after this for loop is done, there will be films.length elements in dom with class counter.
and what this $(".counter").text() will return is concatenation of all text in elements with classes counter. That's why you got 191919191920.
Changes you would need to do:
Add new class to the container increaseing row count. This is mandatory to identify which movie you're on and increase the like value.
<div class='container row-" +i+ "'">
Then add onClick event to the like button to pass which row you're on. This is to identify which counter to increase the value.
<input type="button" class="btn" value="Like 👍" number="1" onclick="incrementLikes('row-" +i+ "')"></input>
$(document).ready(function() {
$(".counter").text(Math.floor((Math.random() * 100) + 1));
});
function incrementLikes(rowId) {
let mainRow = document.getElementsByClassName(rowId)[0];
let counter = parseInt(mainRow.getElementsByClassName('counter')[0].innerHTML);
mainRow.getElementsByClassName('counter')[0].innerHTML = counter + 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container row-1">
<div class="poster">
<img class="pic" src="">
</div>
<div class="text-box">
<div class="details">
<h2>Film Title 1</h2>
<p>13/06/2020</p>
<p>Genre: Action</p>
<p>Director: John Doe</p>
</div>
<div class="like-box">
<input type="button" class="btn" value="Like 👍" number="1" onclick="incrementLikes('row-1')"></input>
<p class="counter"></p>
</div>
</div>
</div>
<div class="container row-2">
<div class="poster">
<img class="pic" src="">
</div>
<div class="text-box">
<div class="details">
<h2>Film Title 2</h2>
<p>13/06/2020</p>
<p>Genre: Action</p>
<p>Director: John Doe</p>
</div>
<div class="like-box">
<input type="button" class="btn" value="Like 👍" number="1" onclick="incrementLikes('row-2')"></input>
<p class="counter"></p>
</div>
</div>
</div>
<div class="container row-3">
<div class="poster">
<img class="pic" src="">
</div>
<div class="text-box">
<div class="details">
<h2>Film Title 3</h2>
<p>13/06/2020</p>
<p>Genre: Action</p>
<p>Director: John Doe</p>
</div>
<div class="like-box">
<input type="button" class="btn" value="Like 👍" number="1" onclick="incrementLikes('row-3')"></input>
<p class="counter"></p>
</div>
</div>
</div>
The problem is your selector ".counter"
$(".counter").text returns the combined string value of all elements that have the class ".counter"
I have modified your code using selectors specific to the clicked button
let films = JSON.parse(movies);
for (let i = 0; i < films.length; i++){
let buttonId = "button" + i;
let movie = `
<div class="container">
<div class="poster">
<img class="pic" src="${films[i].image}">
</div>
<div class="text-box">
<div class="details">
<h2>${films[i].title}</h2>
<p>${films[i].releaseDate}</p>
<p>Genre: ${films[i].genre}</p>
<p>Director: ${films[i].director}</p>
</div>
<div class="like-box">
<input id="${buttonId}" type="button" class="btn" value="Like 👍" number="${i}"></input>
<p class="counter"></p>
</div>
</div>
</div>
`;
$("#main2").append(movie);
$("#${buttonId}.btn").next().text(Math.floor((Math.random()*100) + 1));
}
$("#${buttonId}.btn").click(function() {
let el = parseInt($("#${buttonId}.btn").next().text());
$("#${buttonId}.btn").next().text(el+1);
})
I'm trying to get this to work, but I don't know how to get the value from <span class="lsku"> value </span> and add it as a suffix after the the url. ex: domain.com/link-value
function changespan() {
var spans = document.querySelectorAll('span.lsku');
for (var i = spans.length; i--;) {
var a = document.createElement('a');
a.href = $(".link2part").attr('href');
spans[i].appendChild(a).appendChild(a.previousSibling);
}
}
changespan();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><span class="lsku">50</span></div>
<div class="divTableCell">name 1</div>
<div class="divTableCell"><span class="linkview">view</span>
</div>
</div>
</div>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><span class="lsku">60</span></div>
<div class="divTableCell">name 2</div>
<div class="divTableCell"><span class="lsku">view</span>
</div>
</div>
</div>
VIEW IT WITH JSFIDDLE.NET
I'm assuming your example has a typo and in the second block of divs the second span should have the class linkview instead of lsku. If so, then the following will work.
$('span.linkview').html(function(i, h) {
return $("<a/>", {
html: h,
href: 'domain.com/link-' + $(this).closest('div.divTableRow').find('span.lsku').text()
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><span class="lsku">50</span></div>
<div class="divTableCell">name 1</div>
<div class="divTableCell"><span class="linkview">view</span>
</div>
</div>
</div>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><span class="lsku">60</span></div>
<div class="divTableCell">name 2</div>
<div class="divTableCell"><span class="linkview">view</span>
</div>
</div>
</div>
I think you are looking for textContent or innerText:
function changespan() {
var spans = document.querySelectorAll('span.lsku');
for (var i = spans.length; i--;) {
var a = document.createElement('a');
a.href = $(".link2part").attr('href');
spans[i].appendChild(a);
a.href = a.href + spans[i].textContent;
a.textContent = spans[i].textContent;
}
}
changespan();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><span class="lsku">50</span></div>
<div class="divTableCell">name 1</div>
<div class="divTableCell"><span class="linkview">view</span>
</div>
</div>
</div>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"><span class="lsku">60</span></div>
<div class="divTableCell">name 2</div>
<div class="divTableCell"><span class="lsku">view</span>
</div>
</div>
</div>
I think you could set the value property to the span tag, and pass this property at this section:
a.href = $(".link2part").attr('href');
Like this:
a.href = $(".link2part").attr('href' + 'value');
And the span tag should recive the value property with the value data you want. Like this:
<div class="divTableCell"><span class="lsku" value="view">view</span></div>
Bad title, I know, but it's hard to explain in few words.
I'm automating on nightwatch and ran into something that has me stumped as I'm used to coding on JS only for automation. Normally, it's easy to verify that an element is present, or that an element is not. But for this, I have an html element that shows that results of a search and I need to verify that the results contain only elements
So, I need to make sure that all result-item on the entity-results div only have results with hint-val-fragment match equal to -1000000.0 and hint-prop equal to cpuLimit:, in this example.
<div class="results" style="">
<!---->
<div>
<div class="results-set-title">Results</div>
<!---->
<div class="entity-results">
<div class="result-item">
<div class="result-item-label">
<div class="result-item-name">Resources</div>
<div class="result-item-source"><span>source:</span> <span>cz0</span></div>
</div>
<div class="result-item-hint">
<div class="hint-prop">cpuLimit:</div>
<div class="hint-val">
<div class="hint-val-fragment">
</div>
<div class="hint-val-fragment match">
-1000000.0
</div>
<div class="hint-val-fragment">
</div>
</div>
</div>
</div>
<div class="result-item">
<div class="result-item-label">
<div class="result-item-name">Resources</div>
<div class="result-item-source"><span>source:</span> <span>cz0</span></div>
</div>
<div class="result-item-hint">
<div class="hint-prop">cpuLimit:</div>
<div class="hint-val">
<div class="hint-val-fragment">
</div>
<div class="hint-val-fragment match">
-1000000.0
</div>
<div class="hint-val-fragment">
</div>
</div>
</div>
</div>
<div class="result-item">
<div class="result-item-label">
<div class="result-item-name">Resources</div>
<div class="result-item-source"><span>source:</span> <span>cz0</span></div>
</div>
<div class="result-item-hint">
<div class="hint-prop">cpuLimit:</div>
<div class="hint-val">
<div class="hint-val-fragment">
</div>
<div class="hint-val-fragment match">
-1000000.0
</div>
<div class="hint-val-fragment">
</div>
</div>
</div>
</div>
<div class="result-item">
<div class="result-item-label">
<div class="result-item-name">Resources</div>
<div class="result-item-source"><span>source:</span> <span>cz0</span></div>
</div>
<div class="result-item-hint">
<div class="hint-prop">cpuLimit:</div>
<div class="hint-val">
<div class="hint-val-fragment">
</div>
<div class="hint-val-fragment match">
-1000000.0
</div>
<div class="hint-val-fragment">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Below I've defined isValid, which is applied to every element in an array passed to allValid. This function can be applied after there's been an update on the DOM and you need to recheck the elements:
const isValid = elem => {
const val = elem.getElementsByClassName('hint-val-fragment match')[0].innerHTML.trim()
const hint = elem.getElementsByClassName('hint-prop')[0].innerHTML.trim()
return (
val === '-1000000.0'
&& hint === 'cpuLimit:'
)
}
const allValid = arr => arr.every(isValid)
const parent = document.getElementsByClassName('entity-results')[0]
const children = Array.from(parent.children)
const allAreValid = allValid(children)
I have this page I'm working on, I'm trying to make a facted search for it. (only issue is I have no json as I'm looping through via django.)
What I currently have is this:
var wood = []
$(".checkbar").click(function() {
id = this.id
$('.spe_' + id).toggleClass("filteredlabel");
$('.flr').addClass("hide");
$('.flr_spe_' + id).removeClass("flr hide").addClass("flrcheck");
if (this.classList[1] == 'checked') {
if (wood.length > 0) {
debugger;
$('.flr_spe_' + this.id).removeClass("hide").addClass("flr");
for (var i = 0; i < wood.length; i++)
if (wood[i] === this.id) {
if (wood.length > 1) {
$('.flr_spe_' + this.id).addClass("hide");
}
if (wood.length == 1) {
$('.flr').removeClass("hide");
}
wood.splice(i, 1);
break;
}
}
$(this).toggleClass("checked");
} else {
$(this).toggleClass("checked");
wood.push(this.id)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbar" id="1">
<div class="row">
<div class="box"></div>
<div class="tick"><i class="fas fa-check"></i></div>
Oak (1)
</div>
</div>
<div class="checkbar" id="2">
<div class="row">
<div class="box"></div>
<div class="tick"><i class="fas fa-check"></i></div>
Pine (1)
</div>
</div>
<div class="col-md-4 flr flr_spe_1 flr_rg_1">
<div class="card">
<div class="card-body" align="center">
<div class="flrimagecontainer">
<img class="flrimg" src="/media/images/wood/st_tobacco2x.png" alt="Logo" />
<div class="flrafter">
<p class="spectitle">SPECIES</p>
<p class="spec">Oak</p>
<p class="spectitle">RANGE</p>
<p class="spec">Old Wood</p>
<p class="spectitle">STYLE</p>
<p class="spec">Herringbone</p>
<p class="spectitle">TEXTURE</p>
<p class="spec">Prme</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 flr flr_spe_2 flr_rg_1">
<div class="card">
<div class="card-body" align="center">
<div class="flrimagecontainer">
<img class="flrimg" src="/media/images/wood/straightwood_CfuTJb4.png" alt="Logo" />
<div class="flrafter">
<p class="spectitle">SPECIES</p>
<p class="spec">Pine</p>
<p class="spectitle">RANGE</p>
<p class="spec">Old Wood</p>
<p class="spectitle">STYLE</p>
<p class="spec">Herringbone</p>
<p class="spectitle">TEXTURE</p>
<p class="spec">Prme</p>
</div>
</div>
</div>
</div>
</div>
The problem is when I have to start adding more checkboxes to filter on. If i add another set of checkboxes for range, how would I go about making this so that they filter correctly together?
e.g. if I check Old Wood, And then Check Pine, How can I get just the results that have "Old Wood" and "Pine" and not return Oak?
Many Thanks
Need help with searching and adding algoritm
Javascript code to Compare divs(classes) in parents and if it missing add them to right place...
<div class="score">
<div class="system">
<div class="stff_Flute"></div>
<div class="stff_Timpani"></div>
</div>
<div class="system">
<div class="stff_Flute"></div>
</div>
<div class="system">
<div class="stff_Timpani"></div>
</div>
<div class="system">
<div class="stff_Flute"></div>
<div class="stff_Timpani"></div>
</div>
</div>
to...
<div class="score">
<div class="system">
<div class="stff_Flute"></div>
<div class="stff_Timpani"></div>
</div>
<div class="system">
<div class="stff_Flute"></div>
<div class="stff_Timpani"></div>
</div>
<div class="system">
<div class="stff_Flute"></div>
<div class="stff_Timpani"></div>
</div>
<div class="system">
<div class="stff_Flute"></div>
<div class="stff_Timpani"></div>
</div>
</div>
Maybe is the way throught array comparing but I cannot figure out..
https://jsfiddle.net/e5b1gots/8/
I solved this problem :)
//--- find all instrument ---//
function compareArrays(a, b) {
return !a.some(function (e, i) {
return e != b[i];
});
}
var a = [];
$('.system > div').each(function(){
var all_instruments = $(this).attr('class');
a.push(all_instruments);
});
var filter = function(value, index){ return this.indexOf(value) == index };
var filteredData = a.filter(filter, a );
var a = filteredData;
console.log(a);
$('.score > div').each(function(){
b = [];
$("> div",this).each(function(){
var all_instruments2 = $(this).attr('class');
b.push(all_instruments2)
});
//--- add missing instrument ---//
c = a.filter(function(val) {
return b.indexOf(val) == -1;
});
for (i = 0; i < a.length; i++) {
c = c.sort(a);
$('<div class="'+ (c[i]) +'">'+ (c[i]) +'</div>').appendTo(this);
$(".undefined").remove();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="score">
<div class="system">
<div class="stff_Flute">stff_Flute</div>
<div class="stff_Timpani">stff_Timpani</div>
</div>
<div class="system">
<div class="stff_Flute">stff_Flute</div>
</div>
<div class="system">
<div class="stff_Oboe">stff_Oboe</div>
<div class="stff_Timpani">stff_Timpani</div>
</div>
<div class="system">
<div class="stff_Flute">stff_Flute</div>
<div class="stff_Oboe">stff_Oboe</div>
<div class="stff_Timpani">stff_Timpani</div>
</div>
</div>