divのヘッダインスタンスにCSSを適用する

Question

コンテンツを選択するための非常に高度なヘッダーがあります。内容については、それが属している行に応じてヘッダに異なる色を適用したい。

私はかなり近いです。ヘッダーの代わりにdivにborder-bottomを与えます。

rowsは行数、たとえば12です。 getRowColor（i）は私に16進数の色を与えます。その色はdivの下に表示されるため、動作するはずです。

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)); 
     } 
    ); 

    } 
} 

他にも、私が試した結果はCSSが適用されていません。

それの一部のHTML：

<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

それは正確な要素が着色する必要があるかを理解するために少し難しいですが、私はあなたがおそらくdiv自体の代わりにdiv内h1要素をターゲットにしたいと思います。

あなたは

divs（だけでなく、最初の1）内のすべての h1の要素をターゲットにし

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

に

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

を変更していることを行うことができます。