I have simple question regarding table row.
Below is the example:
var data = ['A', 'B', 'C', 'D', 'E'];
for(var i=0; i<data.length; i++) {
var element = `
<td>${i}</td><tr>
`;
console.log(element);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The result from console.log is:
<td>0</td><tr>
<td>1</td><tr>
<td>2</td><tr>
<td>3</td><tr>
<td>4</td><tr>
Now I need at the last row <td>4</td><tr> no need this <tr>. It should be like this <td>4</td>.
Is there any trick to handle it?
You can try this:
for(let i=0; i<data.length; i++) {
let element = `<td>${i}</td>`;
if (i !== data.length-1) {
element += "<tr>";
}
console.log(element);
}
Say that you have two arrays - headline and content.
headline will contain either 1, 2 or 3 strings.
content will contain either 3, 6 or 9 strings.
I need to loop over these arrays.
The output I'm trying to get:
Headline1
Content1
Content2
Content3
Headline2
Content4
Content5
Content6
Headline3
Content7
Content8
Content9
This nested loop doesn't work, since it puts every content underneath each headline.
headline = ["Headline1", "Headline2", "Headline3"];
content = ["Content1", "Content2", "Content3",
"Content4", "Content5", "Content6",
"Content7", "Content8", "Content9"];
for(var i = 0; i < headline.length; i++){
console.log(headline[i]);
for(var j = 0; j < content.length; j++){
console.log(content[j]);
}
}
I'm getting the strings from a form, and pushing them into an array.
The length of the array depends on how many fields the user wishes to use.
Any suggestions on how I could tackle this problem?
The inner loop should only loop 3 times, not for all of content.length. To get the appropriate entry in content, use i*3+j.
headline = ["Headline1", "Headline2", "Headline3"];
content = ["Content1", "Content2", "Content3",
"Content4", "Content5", "Content6",
"Content7", "Content8", "Content9"
];
for (var i = 0; i < headline.length; i++) {
console.log(headline[i]);
for (var j = 0; j < 3; j++) {
console.log(content[i * 3 + j]);
}
}
You're missing a valuable bit of information. You need to know how many "contents" you put under each "header". From the data you provided, there is no way to tell that, if it can be 1, 2, or 3.
What you have to do when you get the content coming in is do an array of array (or some other structure) to group the right fields.
var headline = ["Headline1", "Headline2", "Headline3"];
var content = [["Content1", "Content2", "Content3"],
["Content4", "Content5", "Content6"],
["Content7", "Content8", "Content9"]];
Notice the extra pairs of [] grouping contents together.
After that, it's fairly trival.
for(var i = 0; i < headline.length; i++){
console.log(headline[i]);
for(var j = 0; j < content[i].length; j++){
console.log(content[i][j]);
}
}
Noticed we're now using content[i].length instead of just content.length and content[i][j] for the console.log instead of just content[j].
For each headline-n, we're getting the nth set of contents and looping through those.
As an aside, for performance-sake, it's best to save your length to a variable in the loop:
for(var i = 0, iLen = headline.length; i < iLen; i++) {
console.log(headline[i]);
for (var j = 0, jLen = content[i].length; j < jLen; j++) {
console.log(content[i][j]);
}
}
Doing that will save it from doing a whole lot of checks of the length, which can make a difference for a large set of results.
You could use a single loop and get the header depending of the content and header length.
var headline = ["Headline1", "Headline2", "Headline3"],
content = ["Content1", "Content2", "Content3", "Content4", "Content5", "Content6", "Content7", "Content8", "Content9"],
l = Math.floor(content.length / headline.length);
content.forEach(function (a, i) {
if (!(i % l) ) {
console.log(headline[Math.floor(i / l)]);
}
console.log(a);
});
I would recommend rearranging the data into array of objects such as:
headlines = [
{
title: 'Headline1',
contents: [
"Content1",
"Content2",
"Content3"
]
},{
title: 'Headline2',
contents: [
"Content4",
"Content5",
"Content6"
]
},
{ ... }
];
If you can't do that for some reasons, the following loop should work:
headline = ["Headline1", "Headline2", "Headline3"];
content = ["Content1", "Content2", "Content3",
"Content4", "Content5", "Content6",
"Content7", "Content8", "Content9"];
for(var i=0, l=headline.length; i<l; i++){
console.log(headline[i]);
for(var j=i*3; j<3*i+3; j++){
console.log(content[j]);
}
}
Cheers!
Here an easy programmatic solution for you:
var j=0,k=1;
var iter=content.length/headline.length;
for(var i=0;i<iter;i++){
console.log(headline[i]);
for(;j<headline.length*k;j++){
console.log(content[j]);
}
k+=1;
}
See working on console:https://jsfiddle.net/7un047q6/
One other way to do this could be...
var headline = ["Headline1", "Headline2", "Headline3"],
content = ["Content1", "Content2", "Content3", "Content4", "Content5", "Content6", "Content7", "Content8", "Content9"],
result = headline.reduce((p,h,i) => [...p,h,...content.slice(i*3,i*3+3)],[]);
console.log(result);
I want change the link attribute href of an existing link with another link using JavaScript. How can I do this?
Here is the link:
See moreSee moreSee more
I have tried the following but it doesn't work:
var links = document.getElementsByTagName('a');
var len = links.replace;
for(var i=0; i<replace; i++){
links[i].href = "newlink.php?+BLABLABAL";
}
Replace links.replace by links.length, since you are iterating over the links array.
Working code:
// This is an array of links
var links = document.getElementsByTagName('a');
// The length of the array
var len = links.length;
// Iterate over the array
for(var i = 0; i < len; i++){
links[i].href = "https://twitter.com";
}
Working demo: http://codepen.io/anon/pen/yYBdgQ
Change your js code with this :
var links = document.getElementsByTagName('a');
var len = links.length;
for(var i=0; i<len; i++){
links[i].href = "newlink.php?+BLABLABAL";
}
You have to take the length of links in var len, and then run the loop through len
I'm new in web development. I converted the list of image names to an array by following codeL
var image_array = $("#image-ul img").map(function() {return $(this).attr("src");});
Now I want to show some of these images. I show all the images by adding following codeL
$('#image-ul img').css('display','block');
But I want some of the images, like the following:
for (var i=0; i<2; i++) { $('#image-ul img:image_array[i]').css('display','block');}
How can I do this?
You don't really use a for loop to do that, you select the images and limit the selection with eq(), lt(), gt() etc. So for anyting with an index lower than 2, you do :
$('#image-ul img:lt(2)').show();
Try
for (var i=0; i<2; i++) { $('#image-ul img:eq(' + i +')').css('display','block');}
Or
for (var i=0; i<2; i++) { $('#image-ul img').eq(i).css('display','block');}
Change this line
for (var i=0; i<2; i++) { $('#image-ul img:image_array[i]').css('display','block');}
to this
for (var i=0; i<2; i++) { $('#image-ul img').eq(i).show(); }
as Juhana pointed out .show() is the best way to show display an element with jQuery
I now multi-dimensional array in javascript is a bit silly. But in my program I have to use it.
I want to declare a dynamic 3 columns and m-rows array using javascript and then in a loop i need to insert some element to that array. finally i want to display that array.
var x = new Array();
for (var y=0; y<=counter; y++) {
x[y] = new Array (3);
x[y][0]='a';
x[y][1]='b';
x[y][2]='c';
}
your help is highly appreciated ...
arrays grow as needed and so there is no point in declaring the length of the array. what you started with is fine.
http://books.google.ca/books?id=4RChxt67lvwC&pg=PA141&lpg=PA141&dq=JS+array+grow+as+needed?&source=bl&ots=tgY8BlGXm8&sig=_3jcH1LTmYi9QiXxn9pHROpbN1s&hl=en&sa=X&ei=7v60T_XwA4ThggfGuoEX&ved=0CEoQ6AEwAQ#v=onepage&q=JS%20array%20grow%20as%20needed%3F&f=false
http://www.codingforums.com/showthread.php?t=5198
just a heads up it will create an array that is 1 bigger then counter. this is b/c in your for loop you have y<=counter and y starting at 0. if you want the length to be counter change it to
y<counter
in order to display the array you might want to consider a for nested loop.
JS
for(var i=0; i<x.length; i++)
for (var j=0; j<3; j++)
alert(x[i][j]);
where x is the reference to the array.
if you want to print the entire array at once consider creating a string from the elements in the array and print that
function displayArray(x){
var stringArray='';
for(var i=0; i<x.length; i++)
for (var j=0; j<3; j++)
stringArray+= x[i][j];
alert(stringArray);
}
Something like this?
var x = [
[
[1, 2, 3],
[4,5,6]
],
[
[7, 8, 9]
]
];
alert(x[0][1][2]);
This is one reason why JavaScript's variable syntax isn't always what it's cracked up to be. Compare to Java:
String[][][] x = new String[5][5][5];
Something like this maybe?
var sDataArray=MultiDimensionalArray(7,2);
alert(sDataArray[0][0]);
function MultiDimensionalArray(iRows,iCols)
{
var i;
var j;
var a = new Array(iRows);
for (i=0; i < iRows; i++)
{
a[i] = new Array(iCols);
for (j=0; j < iCols; j++)
{
a[i][j] = "";
}
}
return(a);
}
Being dynamic in rows maybe you want a list of arrays? You can also do a method to add a line, and increase the array size.
try something like this..
var cols = 3;
var rows = 5;
createArray(cols,rows);
function createArray(cols,rows) {
var newArray = [];
for(i=0;i<cols;i++) {
newArray[i] = [];
for(j=0;j<rows;j++) {
newArray[i][j] = "["+i+"]"+"["+j+"]";
}
}
return newArray;
}