Passing the hex code value of the background-color to the .text() function

Question

Passing the hex code value of the background-color to the .text() function

My goal is to dynamically read the hexadecimal code from the <span> tag and set it as the background color of the same tag using jQuery. Currently, I have code that achieves this with specific variables, but I want to make it more dynamic.

$(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>

I'm looking to modify the code so that it utilizes $(this).text() and can extract the hex code from any <span> tag, even if it's embedded within text like in the second <span> tag. If anyone can provide assistance with this, I would greatly appreciate it as I'm currently facing challenges with it.

jquery css

Answer 1

Answer №1

If you want to achieve this, you can use a function with the css() method to evaluate each element in the matched set. Instead of targeting the first element of all div elements, you can target the first element within each child div by using :first-child. Here's an example:

$(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>

Alternatively, if you want to apply this to all spans and find any hexadecimal value within them, you can remove the :first-child selector and use a regular expression to locate the hex value:

$(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>

Answer 2

If you want to achieve this, you can use a function with the css() method to evaluate each element in the matched set. Instead of targeting the first element of all div elements, you can target the first element within each child div by using :first-child. Here's an example:

$(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>

Alternatively, if you want to apply this to all spans and find any hexadecimal value within them, you can remove the :first-child selector and use a regular expression to locate the hex value:

$(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>

Passing the hex code value of the background-color to the .text() function

Answer №1

Similar questions

How can I make CSS text-overflow ellipsis trigger a pop-up to display lengthy text when clicked?

Using clip-path in SVG works perfectly on images, but unfortunately it does not work on div

Navigate through an image by panning or scrolling within a div container

How to Align Items Horizontally in React Material UI Grid for Containers of Varying Item Counts

Can you please tell me the term used to describe when a background adjusts and follows the movement of a mouse cursor?

Retrieve data from database using ASP.NET and display it without any formatting or HTML tags

Unable to retrieve file name with Jquery Ajax and PHP due to error

What impact does including a parent View Tag have on the styling in React Native?

Issues with negative margin causing background image to not display correctly

Adjust the size of the text and save it in a cookie for later use

I am experiencing difficulty in retrieving the result for the following code snippet

Modifying JQuery function to target two IDs instead of just one

Using ajax to execute a basic PHP function

What is the best way to position two divs side by side while maintaining their individual padding?

"Utilizing Bootstrap's Table Features within the Moodle Platform

Responsive Navigation Bar with Bootstrap

What is the best method for extracting click data from dynamically generated elements?

Connect the mileage tracker to a Datalist or grid view component

small screen right-side navigation with Bootstrap 4

Calculate the combined total of two inputted values instantly