Question

我有一个非常高级的标题来选择内容。对于内容，我想根据它所属的行将不同的颜色应用于标题。

我非常接近;它在div处给出了一个border-bottom而不是标题。

行是行数，例如12。 getRowColor（i）给我一个十六进制颜色，因为那个颜色出现在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

虽然有点难以理解哪些确切元素应该着色，但我认为您可能希望将h1元素定位在div内而不是div本身。

您可以通过更改

来实现

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

到

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

针对h1内的所有divs元素（不仅仅是第一个）。

将CSS应用于标头而不是div

1 个答案: