Question

I have a very advanced header to select content. For the content I want to apply different colors to the header depending on the row it belongs to.

I’m quite close atm; it gives a border-bottom at the div instead of the header.

rows is the number of row, 12 for example.
getRowColor(i) gives me a hex color, and since that color appears the bottom of the div it should work.

function setCSSColors() {
  // set headlines correct color
  var blockIncrement = 1 / rows;

  for(var i = 0; i < rows; i++) {
    var min = i * blockIncrement,
        max = (i + 1) * blockIncrement
    ;

    // sloppy fix
    if(min > 0) {
      min += 0.00000001;
    }

    $(".headline").filter(
      function() {
        return parseFloat( $(this).attr("data-rating") ) >= min &&
               parseFloat( $(this).attr("data-rating") ) <= max
        ;
      }
    ).each(
      function() {
        // console.log( $(this) );

        // getRowColor here instand of red
        $(this).css( "border-bottom", "2px solid " + getRowColor(i) + "" );

        // $("h1").css( "border-bottom", "2px solid " + getRowColor(i) + "" );
        // $(this).children.("h1").css( "border-bottom", "2px solid " + getRowColor(i) + "" );
        console.log( getRowColor(i) );
      }
    );

  }
}

Only everything else I try results in no CSS applied.

some html of it:

<div class="headline" data-rating="0.482005543693" onclick="javascript:showArticle(1076);" style="display: none; ">
                        <div class="headline_txt"><h1>#3726: Meryl Streep schittert in The Iron Lady- alle recensies op een rijtje</h1></div>                       <div class="preview_txt"><p>De eerste foto's van actrice Meryl Streep als de Britse voormalig premier Margaret Thatcher <a href="http://www.guardian.co.uk/film/2011/feb/08/meryl-streep-margaret-thatcher-iron-lady#">leidden</a> vorig jaar al tot een stortvloed aan publiciteit. Nu is <a href="http://www.imdb.com/title/tt1007029/"><em>The Iron Lady</em></a> er dan ook echt. Vanaf vandaag draait de film in de Nederlandse bioscopen. Lees hier alle recensies.<!--more--></p></div>                  </div>

Answer 1

Although it’s a bit hard to understand which exact elements should be coloured, I think you probably want to target the h1 element inside the div instead of the div itself.

You can do that by changing

$(this).css( "border-bottom", "2px solid " + getRowColor(i) + "" );

into

$(this).find('h1').css( "border-bottom", "2px solid " + getRowColor(i) + "" );

That targets all h1 elements inside the divs (not just the first one).