Adding classes to Jquery HTML variable

Question

I'm trying to add multiple classes from JSON file to a HTML element that I created with Jquery in the same function. Problem is none of the classes are going trough. Some of the JSON data sections(items) have more than one class, they are set in an array. HTML part is created and it gets the dat.location but its not getting any of the classes. I think there is something wrong in how I'm inserting the classes but not sure what.

How can I insert the classes to txtp variable in the function?

function CreateContent(data) {
    for (var i = 0; i < data.length; i++) {
        var dat = data[i];
        var txtp = $('<p class="column" href="#">' + dat.location + '</p>');
        $(txtp).addClass(dat.items1);
        $(txtp).addClass(dat.items2);
        $(txtp).addClass(dat.items3);
        $(".positionInHtml").append(txtp); 
    }
}

This is what the JSON data file contains, thou I simplified/changed the variable names for this question.

{
  "Places": [
    {
      "location": "Name1",
      "items1": [ "1A" ],
      "items2": [ "1B","11B" ],
      "items3": [ "1C" ]
    },
    {
      "location": "Name2",
      "items1": [ "2A" ],
      "items2": [ "2B" ],
      "items3": [ "2C","22C" ]
    }
}

Can you show us dat structure and preferably a working snippet demonstrating your issue? — gurvinder372
– gurvinder372, Commented Feb 7, 2018 at 8:38

Rory McCrossan · Accepted Answer · 2018-02-07 08:40:17Z

1

Your problem is because you are creating new jQuery objects from txtp every time you use it, so none of the changes are retained.

To solve this create the object once, then amend/append it as required:

function CreateContent(data) {
  for (var i = 0; i < data.length; i++) {
    var dat = data[i];
    var $txtp = $('<p class="column" href="#">' + dat.location + '</p>').appendTo('.positionInHtml');
    $txtp.addClass(dat.items1);
    $txtp.addClass(dat.items2);
    $txtp.addClass(dat.items3);
  }
}

answered Feb 7, 2018 at 8:40

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

Metzger Over a year ago

This seemed like it would work and made sense but I think something with the JSON file data arrays didn't work with it. I added the JSON contents in the question.

Rory McCrossan Over a year ago

That's because some of the properties are arrays, not strings, so you will need another loop to go through them and add the class names.

laiju · Accepted Answer · 2018-02-07 08:43:18Z

0

Try This

function CreateContent(data) {
    for (var i = 0; i < data.length; i++) {
        var dat = data[i];
        var classes = dat.items1+' '+dat.items2+' '+dat.items3;
        var txtp = $('<p class="column "'+classes+' href="#">' + dat.location + '</p>');
        $(".positionInHtml").append(txtp); 
    }
}

answered Feb 7, 2018 at 8:43

laiju

1,38310 silver badges17 bronze badges

1 Comment

Ahmad Maleki Over a year ago

Some explanation on why he should try this and why this works would be nice.

Metzger · Accepted Answer · 2018-02-08 08:59:03Z

0

The problem seemed to be that in the JSON file the using arrays to store the classes then trying to insert them with Jquery .addClass it does not give the values to the target in this case txtp. Once i removed arrays ["A1","A2"] and made them in string "A1 A2" it worked as intended and the classes were given to txtp.

answered Feb 8, 2018 at 8:59

Metzger

1033 silver badges13 bronze badges

Collectives™ on Stack Overflow

Adding classes to Jquery HTML variable

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related