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>
Related
Starting with this:
<div class="outside">
<div class="container">
</div>
</div>
</div>
<div class="outside">
<div class="container">
</div>
</div>
<div class="outside">
<div class="container">
</div>
</div>
What I am trying to achieve:
<div class="outside">
<a href="link1" class="overlay">
<div class="container">
</div>
</a>
</div>
<div class="outside">
<a href="link2" class="overlay">
<div class="container">
</div>
</a>
</div>
<div class="outside">
<a href="link3" class="overlay">
<div class="container">
</div>
</a>
</div>
Needs to work if for any number of ".container" divs. I'm guessing I should be putting the inner hrefs into an array but I'm getting stuck on how to insert the values into the overlay wraps.
Here's one of my attempts:
var arr = $('.container a').map(function() {
return this.href;
}).toArray();
$('.outside').each(function() {
.wrapInner( '<a href=' + arr + '></a>' );
});
You are almost success,just need to using index to get the right link attribute
var links = $('.container a').map(function() {
return $(this).attr("href");
}).toArray();
$(".outside").wrapInner(i => {
return "<a class='overlay' href='"+links[i]+"'></div>";
});
// test data
$(".outside").each((i,e) => {
console.log("------------------")
console.log(e.outerHTML)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outside">
<div class="container">
Link 1
</div>
</div>
<div class="outside">
<div class="container">
Link 2
</div>
</div>
<div class="outside">
<div class="container">
Link 3
</div>
</div>
Here is a solution with Vanilla JavaScript.
Create an anchor tag
let anchor = document.createElement("a")
Get all the elements with className "outside"
let outside = document.querySelectorAll(".outside")
call a for each for them
outside.forEach( function(element, index) {
anchor.classList.add("overlay")
anchor.setAttribute("href", `link${index+1}`)
let container = element.children[0]
anchor.appendChild(container)
element.prepend(anchor)
console.log(element.outerHTML)
});
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>
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>
I have the following HTML structure:
<div class="col col1">
<div class="colSub1"></div>
<div class="colSub1"></div>
</div>
<div class="col col2">
<div class="colSub2"></div>
<div class="colSub2"></div>
<div class="colSub2"></div>
</div>
<div class="col col3">
<div class="colSub3"></div>
<div class="colSub3"></div>
</div>
I want to sort this like this, without the parent div:
<div class="colSub1"></div>
<div class="colSub2"></div>
<div class="colSub3"></div>
<div class="colSub1"></div>
<div class="colSub2"></div>
<div class="colSub3"></div>
<div class="colSub2"></div>
What is the most effective and fastest way to do this?
The steps:
Find the element with the largest number of "children".
Loop over the max number and in the columns so in each iteration it will take from the .col one item.
If something not clear, please let me know.
The working code:
var cols = $('.col');
var max = Math.max.apply(null, cols.map(function() {
return $(this).children().length;
}).get());
for (var i = 0; i < max; i++) {
for (var j = 0; j < cols.length; j++) {
$('#result').append(cols.eq(j).children().eq(i).clone());
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Before</h3>
<div class="col col1">
<div class="colSub1">col1 - colSub1</div>
<div class="colSub1">col1 - colSub1</div>
</div>
<div class="col col2">
<div class="colSub2">col2 - colSub2</div>
<div class="colSub2">col2 - colSub2</div>
<div class="colSub2">col2 - colSub2</div>
</div>
<div class="col col3">
<div class="colSub3">col3 - colSub3</div>
<div class="colSub3">col3 - colSub3</div>
</div>
<hr />
<h3>After</h3>
<div id="result"></div>
http://jsbin.com/lavemu/edit?html,js
I am trying to select the last 3 divs using JQuery so far I've tried. But it doesn't seem to work
$(document).ready(function(){
$( "div.span4:nth-child(6), div.span4:nth-child(7), div.span4:nth-child(8)" ).
addClass( "myClass" );
});
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
Try this:
$('.span4:gt(-4)').hide();
// It's simply "greater than fourth one from the end" ;)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row-fluid">
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
</div>
Seems working with nth-child(): http://jsfiddle.net/3b8su8f4/
$(document).ready(function(){
$( "div.span4:nth-child(6),div.span4:nth-child(7),div.span4:nth-child(8) " ).addClass( "myClass" );
});
nth-last-child should do?
$('div.span4:nth-last-child(-n+3)').addClass('myClass');
.span4 {
background: #666;
}
.myClass {
background: #0cc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row-fluid">
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
</div>
Use the :gt() selector
var divLength = $('div.span4').length;
$('div.span4:gt(' + (divLength - 4) + ')').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="row-fluid">
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
</div>
You can use:
$('div.span4').slice(-3).addClass('myClass');
jsfiddle