jquery - 当另一个 div 具有特定文本时，如何将 css 样式应用于一个 div

Question

我有以下 HTML，当“overlays”中的“type”为“teaser”时，我需要将 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);
        }
    }); 

查看 JSFIDDLE 演示 HERE

Answer 1

目前您定位的是叠加层部分。您需要定位标题 div。

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

jsfiddle