Assigning dynamic ids to elements using jQuery

Question

Hi I am using jQuery and creating tags in a loop.

Ex -

for(var i=0;i<length;i++){

            jQuery("#dailydata").append("<table class='table'><tr>"+
                "<th>Min Temp : </th><td>"+ data[i]</td>" +
                "</tr></table>";

                if(data[i] <=10){
                    //add color to th
                }else{
                    //add different color to th
                }
        }

I am creating a Table Row in every loop and appending to a HTML element. and just after that I am checking the value and according to that value I want to change the background color of the tag.

Can somebody tell me how to achieve this?

Why do you need IDs? Using JS to add an ID just so that you can later select the same element by ID is generally unnecessary. Why can't you set the colour at the time you create the element? — nnnnnn
– nnnnnn, Commented Jul 5, 2017 at 4:16

Bumpy · Accepted Answer · 2017-07-05 04:16:42Z

1

There are several methods.

The method you're using to build the tags isn't the most elegant, but you could adapt it to achieve the result you're after as follows...

jQuery("#dailydata").append("<table class='table'><tr>"+
            "<th id='"+ (data[i]<=10?'blue':'red') + "'>Min Temp : </th><td>"+ data[i]</td>" +
            "</tr></table>";

I suggest you also read the jQuery docs on how to use 'attr' and 'prop' to add id's (and other attributes/properties) to jQuery elements without hacking the text together as in my example.

jQuery 'attr': https://api.jquery.com/attr/

jQuery 'prop': https://api.jquery.com/prop/

answered Jul 5, 2017 at 4:16

Bumpy

1,3422 gold badges22 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Akki Over a year ago

Thank you it solved my prob and thank you for the links.

brk Over a year ago

If I run this it will have multiple th with same Id, which is completely against the standard

Bumpy Over a year ago

True. But it is fine if @Akki is only using the id's as a means of identifying the th to set the relevant color. Otherwise, then instead of id='', the using class= (or even, data-color= or similar) would work just as well without breaking the standard. If the id's really need to function as unique id's, then I can propose another solution.

mvcdev · Accepted Answer · 2017-07-05 04:18:55Z

0

The simplest way basing on your code:

for (var i = 0; i < length; i++) {
  var color;
  if(data[i] <=10) {
    color = "ff0000";
  } else{
    color = "0000ff";
  }

  jQuery("#dailydata").append(
    "<table class='table'><tr>" +
    "<th style="background-color:#" + color + 
    ">Min Temp : </th><td>" + data[i]</td>" +
    "</tr></table>");
}

answered Jul 5, 2017 at 4:18

mvcdev

32 bronze badges

Comments

Zuks · Accepted Answer · 2017-07-05 04:24:35Z

Firstly:

You should not use numeric values (0,1,2,3,etc) for ids. The HTML specification say this:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Secondly:

Your code is weight... Did you create a variable called "length" in lines not shown in your example? I assume in your for loop you meant i<data.length

So with that in mind use an alphabetical prefix to your ids:

// Note jQuery("#dailydata") same as $("#dailydata") unless you override the use of the "$" symbol

for(var i=0; i<data.length; i++) {
    var newElementId = "some_prefix_"+i;

    var newElementToAppend = $("<div>").attr("id", newElementId);
    $("#dailydata").append(newElementToAppend);
}

brk · Accepted Answer · 2017-07-05 04:28:40Z

You can just add an extra if condition to check the value of i

Here in this example , assume length is value greater than i. Also in your example you are using data[i] but the loop will run on length variable.There is a typo here data[i]</td>" It need to be data[i]+"</td>". Also the append method be closed with )

var length = 15;
for (var i = 0; i < length; i++) {

  if (i < 10) {
    jQuery("#dailydata").append("<table class='table'><tr>" +
      "<th class='less10'>Min Temp : </th><td>" + i + "</td>" +
      "</tr></table>");
  } else {
    jQuery("#dailydata").append("<table class='table'><tr>" +
      "<th class='more10'>Min Temp : </th><td>" + i + "</td>" +
      "</tr></table>");
  }

}

.less10 {
  color: green
}

.more10 {
  color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dailydata">
</div>

Collectives™ on Stack Overflow

Assigning dynamic ids to elements using jQuery

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related