We Keep Coding

How to display only the highest "score" according to the text content inside each div?

I would like to archive the below by using JavaScript (or with jQuery). Here is the HTML structure:
<div class="score-set">
<div class="score-item">A<div id="score">96+</div></div>
<div class="score-item">B<div id="score">99</div></div>
<div class="score-item">C<div id="score">99</div></div>
<div class="score-item">D<div id="score">96-</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">86</div></div>
<div class="score-item">B<div id="score">88</div></div>
<div class="score-item">C<div id="score">90</div></div>
<div class="score-item">D<div id="score">90+</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">83-</div></div>
<div class="score-item">B<div id="score">83+</div></div>
<div class="score-item">C<div id="score">76</div></div>
<div class="score-item">D<div id="score">78</div></div>
</div>
The JavaScript will do the modification, and the desired results will be B 99 C90 A 83- , which looks like:
<div class="score-set">
<div class="score-item">B<div id="score">99</div></div>
</div>
<div class="score-set">
<div class="score-item">C<div id="score">90</div></div>
</div>
<div class="score-set">
<div class="score-item">A<div id="score">83-</div></div>
</div>
The rules are:
Ignore all non-number in id="score", eg. + and -, and do the ranking.
Show one highest score item.
If two score items are the same in a set, show just one according to the div item sequence inside <div class="score-set">, ie. in the above example A > B > C > D.
When writing the result, write the original div item, including + or -.

To be able to do this, it would be best to get each individual score-set and treat one after another.
For each score item, we need to first get the score and transform it (Array#map) into a number with no digits (.replace(\/D+/g, ''))and memorize the score item html object.
Number(scoreItem.querySelector('div').innerText.replace(/\D+/g, ''))
We can then sort the remaining ones in descending order and simply take the first one of the list. Can be done with Array#sort and destructuring assignment.
.sort(({ score: scoreA }, { score: scoreB }) => scoreB - scoreA)
Then finally we update the score set html.
scoreSet.innerHTML = '';
scoreSet.appendChild(scoreItem);
const scoreSets = document.getElementsByClassName('score-set');
for(const scoreSet of scoreSets){
const [{ scoreItem }] = Array
.from(scoreSet.getElementsByClassName('score-item'), scoreItem => ({
scoreItem,
// it would be better here to access the score using the id
// but `score` is used multiple times which makes getting
// the score element unreliable
score: Number(scoreItem.querySelector('div').innerText.replace(/\D+/g, ''))
}))
.sort(({ score: scoreA }, { score: scoreB }) => scoreB - scoreA)
scoreSet.innerHTML = '';
scoreSet.appendChild(scoreItem);
}
<div class="score-set">
<div class="score-item">A
<div id="score">96+</div>
</div>
<div class="score-item">B
<div id="score">99</div>
</div>
<div class="score-item">C
<div id="score">99</div>
</div>
<div class="score-item">D
<div id="score">96-</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div id="score">86</div>
</div>
<div class="score-item">B
<div id="score">88</div>
</div>
<div class="score-item">C
<div id="score">90</div>
</div>
<div class="score-item">D
<div id="score">90+</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div id="score">83-</div>
</div>
<div class="score-item">B
<div id="score">83+</div>
</div>
<div class="score-item">C
<div id="score">76</div>
</div>
<div class="score-item">D
<div id="score">78</div>
</div>
</div>

This can be MUCH simplified
Note I changed the invalid ID to class="score"
If you cannot do that, then change .querySelector(".score") to .querySelector("div")
document.querySelectorAll('.score-set').forEach(scoreSet => {
const scores = [...scoreSet.querySelectorAll(".score-item")];
scores.sort((a,b) => parseInt(b.querySelector(".score").textContent) - parseInt(a.querySelector(".score").textContent))
scoreSet.innerHTML ="";
scoreSet.append(scores[0])
})
<div class="score-set">
<div class="score-item">A
<div class="score">96+</div>
</div>
<div class="score-item">B
<div class="score">99</div>
</div>
<div class="score-item">C
<div class="score">99</div>
</div>
<div class="score-item">D
<div class="score">96-</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div class="score">86</div>
</div>
<div class="score-item">B
<div class="score">88</div>
</div>
<div class="score-item">C
<div class="score">90</div>
</div>
<div class="score-item">D
<div class="score">90+</div>
</div>
</div>
<div class="score-set">
<div class="score-item">A
<div class="score">83-</div>
</div>
<div class="score-item">B
<div class="score">83+</div>
</div>
<div class="score-item">C
<div class="score">76</div>
</div>
<div class="score-item">D
<div class="score">78</div>
</div>
</div>

How to get Parent element

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>

Compare divs(class) in parents and if missing add them to right place javascript

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>

How to get all elementIDs that begin with a substring

I have this code:
HTML:
<div class="lists">
<div class="list 1">
<div id="productCheese">Cheese</div>
<div id="productBread">Bread</div>
<div id="productMilk">Milk</div>
<div id="productEgg">Egg</div>
<div id="addProduct">Add new product to list...</div>
</div>
<div class="list 2">
etc...
</div>
</div>
And JavaScript: (I want to get all elements with an ID that begins with 'product', but the '*' doesn't work for me...)
var node = document.getElementById("product"*);
(And some unnecessary event listeners...)
Now my question is: how to get all the elementIDs that begin with 'product'?

Attribute Selectors will provide what you're looking for. They are used with document.querySelector and document.querySelectorAll.
In your case, you can specify the attribute id that starts with product:
var nodes = document.querySelectorAll('[id^=product]');
Working example:
var nodes = document.querySelectorAll('[id^=product]');
console.log(nodes);
<div class="lists">
<div class="list 1">
<div id="productCheese">Cheese</div>
<div id="productBread">Bread</div>
<div id="productMilk">Milk</div>
<div id="productEgg">Egg</div>
<div id="addProduct">Add new product to list...</div>
</div>
<div class="list 2">
etc...
</div>
</div>

Well you've got pseudo code there; "product"* is a parse error.
You need to use a selector via querySelectorAll.
document.querySelectorAll('[id^="product"]');
This will return a nodelist, which you can then iterate over and do with what you will.

You don't need to give an unique id to each div. Just give to them class="product" and use document.querySelectorAll('.product')

i have test this code and get the desirable result
var matches = [];
var searchEles = document.getElementById("listone").children;
for(var i = 0; i < searchEles.length; i++) {
if(searchEles[i].id.includes('product')){
matches[i]=searchEles[i];
}
}
console.log(matches);
<div class="lists">
<div class="list 1" id="listone">
<div id="productCheese">Cheese</div>
<div id="productBread">Bread</div>
<div id="productMilk">Milk</div>
<div id="productEgg">Egg</div>
<div id="addProduct">Add new product to list...</div>
</div>
<div class="list 2">
etc...
</div>
</div>

with that way too!
var IDs = [];
$("#list").find("div").each(function(){
if(this.id.includes('product')){
IDs.push(this.id);
}
});
console.log(IDs);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lists" id="list">
<div class="list 1" id="listone">
<div id="productCheese">Cheese</div>
<div id="productBread">Bread</div>
<div id="productMilk">Milk</div>
<div id="productEgg">Egg</div>
<div id="addProduct">Add new product to list...</div>
</div>
<div class="list 2" id="listtwo">
<div id="productCheese">Cheese</div>
<div id="productewqewewew">Bread</div>
<div id="productrerereilk</div>
<div id="producttrtytrut">Egg</div>
<div id="addProductccc">Add new product to list...</div>
</div>
</div>

Adding numbers and create a div for the result

I have the following HTML structure (endless) ...
<div class="wrapper">
<div class="content">
<div class="score">1</div>
<div class="score">2.5</div>
<div class="score">1.5</div>
<div class="score">1.5</div>
<div class="score">2</div>
</div>
</div>
... and I want, that the script adding score 1 till 5 for every wrapper. The result of every wrapper should displayed in a new div, called "result". This div should be created by the script too.
It would look like this::
<div class="wrapper">
<div class="content">
<div class="score">1</div>
<div class="score">2.5</div>
<div class="score">1.5</div>
<div class="score">1.5</div>
<div class="score">2</div>
<div class="result">8.5</div> <-- created by script
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="score">2.5</div>
<div class="score">3.5</div>
<div class="score">4</div>
<div class="score">1.5</div>
<div class="score">1</div>
<div class="result">12.5</div> <-- created by script
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="score">4</div>
<div class="score">1.5</div>
<div class="score">2.5</div>
<div class="score">2</div>
<div class="score">1.5</div>
<div class="result">11.5</div> <-- created by script
</div>
</div>
My problems:
a) How can I adding the scores for every wrapper correct, if the class name would be always the same (wrapper, content, score)?
b) How can I create a div with the result for every wrapper automatically?
Can anyone help me?

Iterate over each .content element and then append the sum of the .score elements.
You can achieve this by nesting .each() loops:
Example Here
$('.wrapper .content').each(function () {
var sum = 0;
$(this).find('.score').each(function () {
sum += Number($(this).text(), 10);
});
$(this).append('<div class="result">' + sum + '</div>');
});
$('.wrapper .content').each(function () {
var sum = 0;
$(this).find('.score').each(function () {
sum += Number($(this).text(), 10);
});
$(this).append('<div class="result">' + sum + '</div>');
});
.result {
color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="content">
<div class="score">1</div>
<div class="score">2.5</div>
<div class="score">1.5</div>
<div class="score">1.5</div>
<div class="score">2</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="score">2.5</div>
<div class="score">3.5</div>
<div class="score">4</div>
<div class="score">1.5</div>
<div class="score">1</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="score">4</div>
<div class="score">1.5</div>
<div class="score">2.5</div>
<div class="score">2</div>
<div class="score">1.5</div>
</div>
</div>
Without jQuery:
Example Here
var content = document.querySelectorAll('.wrapper .content');
Array.prototype.forEach.call(content, function (el) {
var score = el.querySelectorAll('.score'),
resultElement = document.createElement('div'),
sum = 0;
Array.prototype.forEach.call(score, function (el) {
sum += Number(el.textContent, 10);
});
resultElement.className += 'result';
resultElement.textContent = sum;
el.appendChild(resultElement);
});

$(document).ready(function(){
$('.content').each(function(){
var total = 0;
$(this).find('> .score').each(function(){
total += parseFloat($(this).text());
});
$(this).append('<div class="result">' + total + '</div>');
});
});
Working Demo

You can use jQuery's DOM each:
var finalVal = 0;
$(function () {
$(".content").each(function () {
finalVal = 0;
$(this).find(".score").each(function () {
finalVal += Number($(this).text());
});
$(this).append('<div class="result">' + finalVal + '</div>');
finalVal = 0;
});
});
.result {background: #99f;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="wrapper">
<div class="content">
<div class="score">1</div>
<div class="score">2.5</div>
<div class="score">1.5</div>
<div class="score">1.5</div>
<div class="score">2</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="score">2.5</div>
<div class="score">3.5</div>
<div class="score">4</div>
<div class="score">1.5</div>
<div class="score">1</div>
</div>
</div>
<div class="wrapper">
<div class="content">
<div class="score">4</div>
<div class="score">1.5</div>
<div class="score">2.5</div>
<div class="score">2</div>
<div class="score">1.5</div>
</div>
</div>