Question

我有以下HTML，并且当“覆盖”中的“类型”为“预告片”时，需要将css背景应用于标题div .well-sm。它目前正在将颜色应用于整个叠加部分。如何将颜色应用于标题div？

HTML

<div class="row">
    <div class="col-xs-6">
        <a href = "/video/4060?region=US">
      <figure class = "media">
        <img src = "" height="300"/>
      </figure>
      </a>
    </div>
    <div class="col-xs-6">
    <p class="lead well well-sm"><a href="">Title of Post</a></p>
    <p class="lead text-uppercase"></p>
      <div class="details">
        <div class="panel panel-default">
        <div class="panel-heading"><dt>ID:4060</dt></div>
          <div class="panel-body">
          <dt>Description:</dt><dd class="description">Description of post</dd>
          <dt>Date Created:</dt><dd>2014-12-09T16:32:00Z</dd>
          <dt>Date Published</dt><dd></dd>
          <dt>Location:</dt><dd>Dec 9</dd>
          <dt>Duration:</dt><dd>5.6653333 seconds</dd>
          <div class="panel panel-default">
                <div class="panel-heading">
                    <dt>Overlay:</dt>
                </div>
                <div class="panel-body">
                        <dl class="list-unstyled">
                          <li><strong><i>Type:</i></strong> TEASER</li>
                          <li><strong><i>Title:</i></strong> Title of Post</li>
                          <li><strong><i>Byline:</i></strong> </li>
                          <li><strong><i>Section:</i></strong> Top News</li>
                          <li><strong><i>Entity:</i></strong> TimelineDescriptorOverlay</li>
                </div>
          </div>
          </div>
        </div>
      </div>
    </div>
    </div>

的jQuery

$(".list-unstyled").each(function() {

    var $el = $(this);
    var color;
    var content = $el.text().toLowerCase();

    if (content.indexOf("teaser")) {
        color = "#ff9100";
    }

    if (color) {
            $el.closest('div')
            .find('li')
            .css("background", color);
        }
    });

SEE JSFIDDLE DEMO HERE

Answer 1

试试这个：http://jsfiddle.net/yeco6rkh/3/

var div = $el.closest('div');
        div.find("li").filter(function() {
            return $(this).text().indexOf("Title") > -1;            
        }).css("background", color);

Answer 2

您可以使用jquery :contains() Selector：

$(".list-unstyled").each(function() {

  var $el = $(this);
  var color;
  var content = $el.text().toLowerCase();

  if (content.indexOf("teaser")) {
    color = "#ff9100";
  }

  if (color) {
    $el.closest('div')
      .find('li')
      .css("background", color);
  }
});

$(".list-unstyled li:contains('TEASER')").css("background", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-6">
    <a href="/video/4060?region=US">
      <figure class="media">
        <img src="" height="300" />
      </figure>
    </a>

  </div>
  <div class="col-xs-6">
    <p class="lead well well-sm"><a href="">Title of Post</a>
    </p>
    <p class="lead text-uppercase"></p>
    <div class="details">
      <div class="panel panel-default">
        <div class="panel-heading"><dt>ID:4060</dt>
        </div>
        <div class="panel-body"> <dt>Description:</dt>
          <dd class="description">Description of post</dd> <dt>Date Created:</dt>
          <dd>2014-12-09T16:32:00Z</dd> <dt>Date Published</dt>
          <dd></dd> <dt>Location:</dt>
          <dd>Dec 9</dd> <dt>Duration:</dt>
          <dd>5.6653333 seconds</dd>
          <div class="panel panel-default">
            <div class="panel-heading"> <dt>Overlay:</dt>

            </div>
            <div class="panel-body">
              <dl class="list-unstyled">
                <li><strong><i>Type:</i></strong> TEASER</li>
                <li><strong><i>Title:</i></strong> Title of Post</li>
                <li><strong><i>Byline:</i></strong> 
                </li>
                <li><strong><i>Section:</i></strong> Top News</li>
                <li><strong><i>Entity:</i></strong> TimelineDescriptorOverlay</li>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

目前您正在定位覆盖部分。你需要定位标题div。

        $('.well-sm').css("background",color);//entire div
        $('.well-sm').find('a').css("background",color);//just the word

jsfiddle

Answer 4

我不是jQuery中最好的，但你可以试试这个

$(".list-unstyled").each(function() {

    var $el = $(this);
    var content = $el.text().toLowerCase();

    if (content.indexOf("teaser")) {
       $('.well-sm').addClass('color');
    }

});

CSS：

.color{background-color:#ff9100;}

当另一个div具有某些文本时，如何将css样式应用于一个div

4 个答案: