jquery - 通过 .text() 推送背景颜色的十六进制代码值

Question

我正在尝试从 <span> 读取十六进制代码标记并将其设置为 background color相同标签的 - 使用以下 jQuery 代码: 目前它工作正常，但它是特定的，并且使用变量而不是动态获取值。

$(document).ready(function() {
  var primeCol = $('.colorBlocks div:eq(0) span').text();
  $(".colorBlocks div:eq(0) span").css("background-color", primeCol);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>#0099cc</span>
</div>
<div>
  <span>Primary Color 2 is #OOffcc</span>
</div>

我需要使其动态，以便它使用 $(this).text()也许无需对任何 <span> 使用变量标签。另外，要从文本中识别十六进制代码，如第二个 <span> 中所示。标签。请问有人可以帮忙吗？我正在为此苦苦挣扎。

Answer 1

要实现此目的，您可以向 css() 方法提供一个函数，该函数将用于评估匹配集中的每个元素。从那里，您需要使用 :first-child 来匹配每个子 div 中的第一个元素，而不是所有子元素中的第一个。试试这个:

$(document).ready(function() {
  $('.colorBlocks div:first-child span').css('background-color', function() {
    return $(this).text();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colorBlocks">
  <div>
    <span>#0099cc</span>
  </div>
  <div>
    <span>Primary Color 2 is #OOffcc</span>
  </div>
</div>
<div class="colorBlocks">
  <div>
    <span>#cc0000</span>
  </div>
  <div>
    <span>Primary Color 2 is #OOffcc</span>
  </div>
</div>

或者，要对所有范围执行此操作并查找其中的任何十六进制值，请删除 :first-child 选择器并使用正则表达式查找十六进制值:

$(document).ready(function() {
  $('.colorBlocks div span').css('background-color', function() {
    return /#[0-9A-F]{6}/gi.exec($(this).text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colorBlocks">
  <div>
    <span>#0099cc</span>
  </div>
  <div>
    <span>Primary Color 2 is #00ffcc</span>
  </div>
</div>
<div class="colorBlocks">
  <div>
    <span>#cc0000</span>
  </div>
  <div>
    <span>Primary Color 2 is #00ffcc</span>
  </div>
</div>
<div class="colorBlocks">
  <div>
    <span>#00cc00</span>
  </div>
  <div>
    <span>Primary Color 3 is not specified</span>
  </div>
</div>