jQuery use variables in .css()

Question

I've written this code and it doesnt work

$('.item').each(function(){
    var ItemGradient1 = $(this).attr('data-gradient-1');
    var ItemGradient2 = $(this).attr('data-gradient-2');
    var ItemGradient = 'linear-gradient(to right bottom, ' + ItemGradient1 + ', ' + ItemGradient2 + ');'
    $(this).children('.portfolio-wrapper').append('<div class="item-after"></div>');
    $(this).children('.portfolio-wrapper').children('.item-after').css('background', ItemGradient);
    console.log(ItemGradient);
});

I think it doenst work because of this line:

    $(this).children('.portfolio-wrapper').children('.item-after').css('background', ItemGradient);

This is the html:

      <div class="item Others" data-cat="Others" data-path="/portfolio/others/jonasplatin_website/" data-gradient-1="#ffef80" data-gradient-2="#464646">
          <div class="portfolio-wrapper">
              <img src="/portfolio/others/jonasplatin_website/thumbnail.jpg" alt="Jonas Platin unofficial website" />
              <div class="desc">
                  <h2 class="item-info">Jonas Platin unofficial website</h2>
                  <h3 class="item-info">Webdesign</h3>
              </div>
          </div>
      </div>

Do you see any errors? Thanks for helping

Answer 1

The problem is with this line:

var ItemGradient = 'linear-gradient(to right bottom, ' + ItemGradient1 + ', ' + ItemGradient2 + ');'

the css function is rejecting ItemGradient because of the extra ; at the end of the string. Remove it and it will work :)

Since you are learning, this is another way to write that function:

$('.item').each(function(){
    var itemGradient1 = $(this).data('gradient-1');
    var itemGradient2 = $(this).data('gradient-2');
    var itemGradient = 'linear-gradient(to right bottom, ' + itemGradient1 + ', ' + itemGradient2 + ')';
    $(this)
        .find('.portfolio-wrapper')
        .append('<div class="item-after"></div>')
        .css('background', itemGradient);
});