Jquery trying to increment the data delay for every child - javascript

I am trying to increment the delay of every data-attribute inside the div element.
See my code
JQUERY
jQuery(document).ready(function($) {
var Column = [], startDelayTime, counter;
Column = $('.col-outside');
startDelayTime = 300;
addDelayTime = 25;
for(var i = 0; i < Column.length; i++) {
Column.attr('data-sal-delay', startDelayTime + addDelayTime[i]);
}
});
HTML:
<div class="col-md-3 col-outside" data-sal="slide-right" data-sal-easing="ease-out-bounce" data-sal-delay="300">
Hopefully someone can explain me what i am doing wrong, or what i have to do.

The logic in your loop needs to look like this. I removed the JQuery logic to simplify the example.
var currentDelay = 300;
var addDelayTime = 25;
for(var i = 0; i < 10; i++) {
// Column.attr('data-sal-delay', currentDelay);
console.log(currentDelay);
currentDelay += addDelayTime;
}

This will work:
You need to multiply by i on delayStart to get desired effect.
$(function() {
var Column = [], startDelayTime, counter;
Column = $('.col-outside');
startDelayTime = 300;
addDelayTime = 25;
Column.each(function(i, c){
$(c).attr('data-sal-delay', startDelayTime+ (addDelayTime*i));
});
});

You need to do two things:
Use the current column in your loop (Column[i] rather than Column).
Increment the value of startDelayTime every time the loop iterates.
Here's your edited code:
jQuery(document).ready(function($) {
var Column = [], startDelayTime, counter;
Column = $('.col-outside');
startDelayTime = 300;
addDelayTime = 25;
for(var i = 0; i < Column.length; i++) {
Column[i].attr('data-sal-delay', startDelayTime + addDelayTime);
startDelayTime += addDelayTime;
}
});
Now your code should work. Hopefully this helps!

There are a few problems with your code.
Within your loop, you need to access the single column node using Column[i] in order to set an attribute.
attr() is a jQuery method, so you need to use it on a jQuery selection like $(Column[i]).attr(name, value). Or you could just use the javascript method setAttribute like Column[i].setAttribute(name, value)
addDelayTime is an integer so addDelayTime[i] is undefined. What you want to do here instead is multiply addDelayTime by the current array index. addDelayTime * i
In this example I've fixed the above 3 issues and instead of a for loop I've used jQuery's each to iterate over the columns.
jQuery(document).ready(function($) {
var startDelayTime = 300;
var addDelayTime = 25;
$.each($(".col-outside"), function(index, item) {
$(item).attr("data-sal-delay", startDelayTime + index * addDelayTime);
});
});
.col-outside::after {
content: attr(data-sal-delay);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-outside"></div>
<div class="col-outside"></div>
<div class="col-outside"></div>
<div class="col-outside"></div>
<div class="col-outside"></div>

Related

Cloning element based on dynamic value creating endless loop

I have a slider input field that gives a numeric value when slid. I would like to clone an object X times based on the slider value, however when I try to accomplish this it creates an endless loop. Is there anyway to get the number of cloned elements to match the slider value when it changes? Here is the code I was using.
jQuery(document).ready(function($) {
$(window).load(function() {
$('input#fieldname3_1').change(function() {
var e = $('#student-icons.icon > span');
var n = $('#fieldname9_1').val();
$('#student-icons.icon').html(
for (var i = 0; i < n; i++) {
e.clone().insertAfter(e);
});
}).change()
});
});
Try the following setup:
HTML:
<input type="range" id='fieldname3_1' style='width: 200px'>
<div id='student-icons' class='icon'></div>
JavaScript:
$(document).ready(function($) {
$('input#fieldname3_1').change(function() {
var n = $(this).val();
// reset the element
$('#student-icons.icon').html('');
for (var i = 0; i < n; i++) {
// The html of what you want to clone goes here
$('#student-icons.icon').append("<div id='hello'>"+i+"</div>")
}
});
});
I also recommend using the oninput event if browser support is not an issue (IE 9 and up only):
$(document).ready(function($) {
$('input#fieldname3_1')[0].oninput = function() {
var n = $(this).val();
$('#student-icons.icon').html('');
for (var i = 0; i < n; i++) {
$('#student-icons.icon').append("<div id='hello'>"+i+"</div>")
}
};
});
This will allow the event to fire as soon as the input is changed rather than wait on the keydown.
JsFiddle
JsFiddle w/ onInput

How to change the parameters of getElementById in a loop

I am working on a form, and I would like to reset the lines individually without using reset.
How to vary the values ​​of the attribute passed as parameter of the method getElementById in JavaScript using a loop?
Here is an example of my source code below:
<script>
var element = document.getElementById('#re');
element.addEventListener('click', function() {
document.getElementById("#id1").value = "";
document.getElementById("#id2").value = "";
document.getElementById("#id3").value = "";
});
</script>
Assuming your IDs have the format shown in your example:
for (var i = 1; i <= 3; i++) {
document.getElementById("id" + i).value = "";
}
If that's not the case but you know the ID of every element you can put all IDs in an array and use that:
var elementIds = ["id1", "id2", "id3"];
elementIds.forEach(function(id) {
document.getElementById(id).value = "";
});
Another solution is to give all the elements you want to reset a specific class and target that:
var elements = document.getElementsByClassName("resetable-element");
[].slice.call(elements).forEach(function(element) {
element.value = "";
});
Instead of using ids, you can loop through your inputs for example:
var inputs = document.querySelectorAll("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].value = "";
}
For your simple example, you could loop through the values 1 - 3 (I assume the # in the ID is a typo?):
for(var i = 1; i <= 3; i++) {
document.getElementById('id' + i).value = '';
}
If you can identify the elements by something else, such as a class name, you might prefer to iterate over that:
var elements = document.querySelectorAll('.field');
Array.prototype.slice.call(elements).forEach(function(element) {
element.value = '';
});

Fill Html Selection "FontSize" by JavaScript

I want to fill my Selection by Script. I am struggling with the filling method.
When I want to fill my FontSizeMenu I use this code:
function FillFontSizeMenu() { // run this at Start
FillSelection(GetPossibleFontSizes(), "fontSizeMenu"); // Fill the selection with values
}
function GetPossibleFontSizes(){ // Return all values for the menu
var sizeMin = 1;
var sizeMax = 100;
var possibleSizes = [];
for(var i = sizeMin; i <= sizeMax; i++)
{
possibleSizes.push(i);
}
return possibleSizes;
}
function FillSelection(possibleValues, elementId){ // Fill the menu
for(var i = 0; i < possibleValues.length; i++)
{
var optionElement = "<option></option>"; // add one option element per value
optionElement.html(possibleValues[i]);
optionElement.val(possibleValues[i]);
$(elementId).append(optionElement); // add the option element to the selection
}
}
Something is wrong with the "FillSelection" method, it says the option element is not a function.
Does someone knows what is wrong or missing?
Thanks
Wrap html string in jQuery()
var optionElement = $("<option></option>");
You can also use jQuery() to set html, value and call .appendTo()
$("<option></option>", {
html: possibleValues[i],
value: possibleValues[i],
appendTo: $(elementId)
});
Here is one more solution
You need to create new Option object
$(elementId).append(new Option("Font size "+i, possibleValues[i]));
and you should pass #id to function:
FillSelection(GetPossibleFontSizes(), "#fontSizeMenu")
function FillFontSizeMenu() { // run this at Start
FillSelection(GetPossibleFontSizes(), "#fontSizeMenu"); // Fill the selection with values
}
function GetPossibleFontSizes(){ // Return all values for the menu
var sizeMin = 1;
var sizeMax = 100;
var possibleSizes = [];
for(var i = sizeMin; i <= sizeMax; i++)
{
possibleSizes.push(i);
}
return possibleSizes;
}
function FillSelection(possibleValues, elementId){ // Fill the menu
for(var i = 0; i < possibleValues.length; i++)
{
$(elementId).append(new Option("Font size "+i, possibleValues[i])); // add the option element to the selection
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="FillFontSizeMenu()">Populate it</button>
<select id="fontSizeMenu">
</select>
You have to create an element first then append properties using jquery. Something like this
var ele = document.createElement("<option>");
$("body").append(ele);
$(ele).html(possibleValues[i]);
$(ele).val(possibleValues[i]);

using jQuery to iterate through an array to create links

I am attempting to loop through a very simple array in order to create a menu. I have been all around the solution, but have yet to nail it down.
Here's my script:
var json_data = [["Womens","/womens"],["Best Sellers","/best-sellers"]];
var json_length = json_data.length;
var inner_length = 0;
for (var i = 0; i<json_length; i++)
{
inner_length = json_data[i].length;
for( var j = 0; j<inner_length; j++ ){
var innerData = json_data[i][j];
var data = '' + json_data[j][0] + '<br/>';
//alert(data);
$("#content").append(data);
}
}
Basic HTML:
<div id="content">
</div>
When I move the code to append to my div within the first for loop (rather than the second), the second object's data is shown twice rather than the first then second. The current code shows both the first and second object's data, but duplicates it due to being inside the second for loop. I'm sure there is a simple solution, but I am at a loss of ideas.
You can iterate through the array more easily using forEach():
json_data.forEach(function(item) {
var data = '' + item[0] + '<br/>';
$("#content").append(data);
});
Fiddle
Updated your fiddle, removed the unnecessary loop:
https://jsfiddle.net/79k32o1j/4/
for (var i = 0; i<json_length; i++) {
var data = '' + json_data[i][0] + '<br/>';
$("#content").append(data);
}

Set table columns equal length

How would the css look if I needed to do this. I have a javascript function that gets data and outputs rows. The data matches up (like the first element of row 1 is of the same type as first of row 2, second is same as second etc.)
But sometimes one element of an upper row will be much longer than the corresponding elements, so it doesn't come down like a straight column. How do I fix this?
rowIndex=0;
while(rowIndex<table.length){
present_row = $("#table").append("<div class='row'></div>");
itemIndex= 0;
while(itemIndex<table[rowIndex].length){
present_row.append("<div class='tableItem'>"+ table[rowIndex][itemIndex] +"</div>");
itemIndex+=1;
}
rowIndex+=1
}
}
What this gives me is a set of rows that aren't
Use a real table:
rowIndex=0;
while(rowIndex < table.length) {
present_row = $("#table").append("<tr></tr>");
itemIndex= 0;
while(itemIndex < table[rowIndex].length) {
present_row.append("<td class='tableItem'>"+ table[rowIndex][itemIndex] +"</td>");
itemIndex+=1;
}
rowIndex+=1
}
}
You can use the following to make height of rows equal
$(document).ready(function() {
var nHeight = 0;
$('.tableItem').each(function() {
var defHeight = $(this).height();
nHeight = defHeight < nHeight ? nHeight : defHeight;
});
$('.tableItem').height(nHeight); });
});

Categories