Assign id to div dynamically created from a JSON file
0
I want to assign dynamic id attributes to the div(s) which are being appended through JavaScript. For example:
function x() {
for (current_list = 0; current_list < data.length; current_list++) {
$("#current").append(
"<div class="card">" +
"<a href="" + data[current_list].url + "">" + data[current_list].name + "</a>" +
"</div>");
}
}
Two cards will be appended, so I want to assign them an id which can increase if there are more numbers of arrays present in the JSON.
javascript jquery html
edited Nov 20 '18 at 11:24
fiza khan
713419
asked Nov 20 '18 at 10:16
Khelawan Verma
12
add a comment |
0
I want to assign dynamic id attributes to the div(s) which are being appended through JavaScript. For example:
function x() {
for (current_list = 0; current_list < data.length; current_list++) {
$("#current").append(
"<div class="card">" +
"<a href="" + data[current_list].url + "">" + data[current_list].name + "</a>" +
"</div>");
}
}
Two cards will be appended, so I want to assign them an id which can increase if there are more numbers of arrays present in the JSON.
javascript jquery html
edited Nov 20 '18 at 11:24
fiza khan
713419
asked Nov 20 '18 at 10:16
Khelawan Verma
12
You mean classcard1, card2, card3, ...?
– Mohammad
Nov 20 '18 at 10:17
Be careful with your quotes as your syntax is currently broken. I'd also question why you need theidattributes at all. Using DOM traversal is often a simpler technique to do what you require.
– Rory McCrossan
Nov 20 '18 at 10:20
yes, cards will increase with time.
– Khelawan Verma
Nov 20 '18 at 10:21
add a comment |
0
0
0
I want to assign dynamic id attributes to the div(s) which are being appended through JavaScript. For example:
function x() {
for (current_list = 0; current_list < data.length; current_list++) {
$("#current").append(
"<div class="card">" +
"<a href="" + data[current_list].url + "">" + data[current_list].name + "</a>" +
"</div>");
}
}
Two cards will be appended, so I want to assign them an id which can increase if there are more numbers of arrays present in the JSON.
javascript jquery html
edited Nov 20 '18 at 11:24
fiza khan
713419
asked Nov 20 '18 at 10:16
Khelawan Verma
12
I want to assign dynamic id attributes to the div(s) which are being appended through JavaScript. For example:
function x() {
for (current_list = 0; current_list < data.length; current_list++) {
$("#current").append(
"<div class="card">" +
"<a href="" + data[current_list].url + "">" + data[current_list].name + "</a>" +
"</div>");
}
}
Two cards will be appended, so I want to assign them an id which can increase if there are more numbers of arrays present in the JSON.
javascript jquery html
javascript jquery html
edited Nov 20 '18 at 11:24
fiza khan
713419
asked Nov 20 '18 at 10:16
Khelawan Verma
12
edited Nov 20 '18 at 11:24
fiza khan
713419
asked Nov 20 '18 at 10:16
Khelawan Verma
12
edited Nov 20 '18 at 11:24
fiza khan
713419
edited Nov 20 '18 at 11:24
fiza khan
713419
edited Nov 20 '18 at 11:24
fiza khan
713419
713419
asked Nov 20 '18 at 10:16
Khelawan Verma
12
asked Nov 20 '18 at 10:16
Khelawan Verma
12
asked Nov 20 '18 at 10:16
Khelawan Verma
12
12
You mean classcard1, card2, card3, ...?
– Mohammad
Nov 20 '18 at 10:17
Be careful with your quotes as your syntax is currently broken. I'd also question why you need theidattributes at all. Using DOM traversal is often a simpler technique to do what you require.
– Rory McCrossan
Nov 20 '18 at 10:20
yes, cards will increase with time.
– Khelawan Verma
Nov 20 '18 at 10:21
add a comment |
You mean classcard1, card2, card3, ...?
– Mohammad
Nov 20 '18 at 10:17
Be careful with your quotes as your syntax is currently broken. I'd also question why you need theidattributes at all. Using DOM traversal is often a simpler technique to do what you require.
– Rory McCrossan
Nov 20 '18 at 10:20
yes, cards will increase with time.
– Khelawan Verma
Nov 20 '18 at 10:21
You mean class
card1, card2, card3, ...?– Mohammad
Nov 20 '18 at 10:17
You mean class
card1, card2, card3, ...?– Mohammad
Nov 20 '18 at 10:17
Be careful with your quotes as your syntax is currently broken. I'd also question why you need the
id attributes at all. Using DOM traversal is often a simpler technique to do what you require.– Rory McCrossan
Nov 20 '18 at 10:20
Be careful with your quotes as your syntax is currently broken. I'd also question why you need the
id attributes at all. Using DOM traversal is often a simpler technique to do what you require.– Rory McCrossan
Nov 20 '18 at 10:20
yes, cards will increase with time.
– Khelawan Verma
Nov 20 '18 at 10:21
yes, cards will increase with time.
– Khelawan Verma
Nov 20 '18 at 10:21
add a comment |
3 Answers
3
active
oldest
votes
1
you probably looking for this.
function x() {
var container=$("#current");
for(var i=1;i<10;i++)
{
var id="card"+i;
var divHtml="<div class='"+id+"'>" +
"<a href=""+data[current_list].url+"">"+data[current_list].name+"</a>" +
"</div>"
container.append(divHtml);
}
}
answered Nov 20 '18 at 10:20
Negi Rox
1,7101511
add a comment |
0
As Rory said, here a solution using DOM traversal.
You would have to call this after appending your "cards".
$(".card").each(function(value, index){
$(value).attr("id", "card" + index);
});
answered Nov 20 '18 at 10:22
louis12356
7910
add a comment |
0
if you call x() function one time you can use
function x() {
for (current_list = 0; current_list < data.length; current_list++) {
$("#current").append('<div id="card-'+current_list+'" class="card"><a href="' + data[current_list].url + '">' + data[current_list].name + '</a></div>');
}
}
and if you call it many time you can use this function after every call
$(".card").each(function(value, index){
$(value).attr("id", "card-" + index);
});
answered Nov 20 '18 at 10:55
New Developer
762
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53390757%2fassign-id-to-div-dynamically-created-from-a-json-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
you probably looking for this.
function x() {
var container=$("#current");
for(var i=1;i<10;i++)
{
var id="card"+i;
var divHtml="<div class='"+id+"'>" +
"<a href=""+data[current_list].url+"">"+data[current_list].name+"</a>" +
"</div>"
container.append(divHtml);
}
}
answered Nov 20 '18 at 10:20
Negi Rox
1,7101511
add a comment |
1
you probably looking for this.
function x() {
var container=$("#current");
for(var i=1;i<10;i++)
{
var id="card"+i;
var divHtml="<div class='"+id+"'>" +
"<a href=""+data[current_list].url+"">"+data[current_list].name+"</a>" +
"</div>"
container.append(divHtml);
}
}
answered Nov 20 '18 at 10:20
Negi Rox
1,7101511
add a comment |
1
1
1
you probably looking for this.
function x() {
var container=$("#current");
for(var i=1;i<10;i++)
{
var id="card"+i;
var divHtml="<div class='"+id+"'>" +
"<a href=""+data[current_list].url+"">"+data[current_list].name+"</a>" +
"</div>"
container.append(divHtml);
}
}
answered Nov 20 '18 at 10:20
Negi Rox
1,7101511
you probably looking for this.
function x() {
var container=$("#current");
for(var i=1;i<10;i++)
{
var id="card"+i;
var divHtml="<div class='"+id+"'>" +
"<a href=""+data[current_list].url+"">"+data[current_list].name+"</a>" +
"</div>"
container.append(divHtml);
}
}
answered Nov 20 '18 at 10:20
Negi Rox
1,7101511
answered Nov 20 '18 at 10:20
Negi Rox
1,7101511
answered Nov 20 '18 at 10:20
Negi Rox
1,7101511
answered Nov 20 '18 at 10:20
Negi Rox
1,7101511
1,7101511
add a comment |
add a comment |
0
As Rory said, here a solution using DOM traversal.
You would have to call this after appending your "cards".
$(".card").each(function(value, index){
$(value).attr("id", "card" + index);
});
answered Nov 20 '18 at 10:22
louis12356
7910
add a comment |
0
As Rory said, here a solution using DOM traversal.
You would have to call this after appending your "cards".
$(".card").each(function(value, index){
$(value).attr("id", "card" + index);
});
answered Nov 20 '18 at 10:22
louis12356
7910
add a comment |
0
0
0
As Rory said, here a solution using DOM traversal.
You would have to call this after appending your "cards".
$(".card").each(function(value, index){
$(value).attr("id", "card" + index);
});
answered Nov 20 '18 at 10:22
louis12356
7910
As Rory said, here a solution using DOM traversal.
You would have to call this after appending your "cards".
$(".card").each(function(value, index){
$(value).attr("id", "card" + index);
});
answered Nov 20 '18 at 10:22
louis12356
7910
edited Nov 20 '18 at 10:34
answered Nov 20 '18 at 10:22
louis12356
7910
answered Nov 20 '18 at 10:22
louis12356
7910
answered Nov 20 '18 at 10:22
louis12356
7910
7910
add a comment |
add a comment |
0
if you call x() function one time you can use
function x() {
for (current_list = 0; current_list < data.length; current_list++) {
$("#current").append('<div id="card-'+current_list+'" class="card"><a href="' + data[current_list].url + '">' + data[current_list].name + '</a></div>');
}
}
and if you call it many time you can use this function after every call
$(".card").each(function(value, index){
$(value).attr("id", "card-" + index);
});
answered Nov 20 '18 at 10:55
New Developer
762
add a comment |
0
if you call x() function one time you can use
function x() {
for (current_list = 0; current_list < data.length; current_list++) {
$("#current").append('<div id="card-'+current_list+'" class="card"><a href="' + data[current_list].url + '">' + data[current_list].name + '</a></div>');
}
}
and if you call it many time you can use this function after every call
$(".card").each(function(value, index){
$(value).attr("id", "card-" + index);
});
answered Nov 20 '18 at 10:55
New Developer
762
add a comment |
0
0
0
if you call x() function one time you can use
function x() {
for (current_list = 0; current_list < data.length; current_list++) {
$("#current").append('<div id="card-'+current_list+'" class="card"><a href="' + data[current_list].url + '">' + data[current_list].name + '</a></div>');
}
}
and if you call it many time you can use this function after every call
$(".card").each(function(value, index){
$(value).attr("id", "card-" + index);
});
answered Nov 20 '18 at 10:55
New Developer
762
if you call x() function one time you can use
function x() {
for (current_list = 0; current_list < data.length; current_list++) {
$("#current").append('<div id="card-'+current_list+'" class="card"><a href="' + data[current_list].url + '">' + data[current_list].name + '</a></div>');
}
}
and if you call it many time you can use this function after every call
$(".card").each(function(value, index){
$(value).attr("id", "card-" + index);
});
answered Nov 20 '18 at 10:55
New Developer
762
answered Nov 20 '18 at 10:55
New Developer
762
answered Nov 20 '18 at 10:55
New Developer
762
answered Nov 20 '18 at 10:55
New Developer
762
762
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53390757%2fassign-id-to-div-dynamically-created-from-a-json-file%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You mean class
card1, card2, card3, ...?– Mohammad
Nov 20 '18 at 10:17
Be careful with your quotes as your syntax is currently broken. I'd also question why you need the
idattributes at all. Using DOM traversal is often a simpler technique to do what you require.– Rory McCrossan
Nov 20 '18 at 10:20
yes, cards will increase with time.
– Khelawan Verma
Nov 20 '18 at 10:21