Find all paragraphs with the CSS property "background-color" using JQuery

My task involves modifying the CSS of a paragraph tag that has a background color of #aaddff.

The code I have written seems to be missing something, as the border is not appearing as expected.

Should I use element.style or is there a different approach I should take?

<script type="text/javascript">
    $(function () {
        $('p').filter(function () {
         return $(this).css("background-color") === "#aaddff";
        })
        .css("border", "2px solid black");
    });

</script>

</head>

<body>
<div>       
    <p class="test" style="background-color:#aaddff;">Hello</p>
    <p class="test" style="background-color:blue;">Hello</p>
    <p class="test" style="background-color:#aaddff;">Hello</p>
</div>
</body>

Answer №1

$(this).css("background-color") retrieves the RGB value of your color, so make sure to compare that instead of the hexadecimal value :

$('p').filter((_, e) => $(e).css("background-color") == "rgb(170, 221, 255)")
  .css("border", "2px solid black");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="test" style="background-color:#aaddff;">Hello</p>
<p class="test" style="background-color:blue;">Hello</p>
<p class="test" style="background-color:#aaddff;">Hello</p>

Answer №2

When using JQuery's "css" function, it will return an RGB value instead of a hexadecimal code, which is detailed on this page.

To convert the RGB value to hex, you can follow the instructions provided in this helpful answer.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging PHP JSON responses for decision-making in jQuery/JavaScript

Recently, a friend shared the following code snippet with me: json : { result: true } success function(data){ if(data.result) { //do something here } else { //do something here } } I'm curious how I can integrate that ...

Limit the bootstrap datepicker to display only certain dates and today's date

I've integrated the Bootstrap Datepicker into my website. I need to customize it so that only specific dates are enabled, including today's date, and all other years, months, and days are hidden from the Datepicker. How can I achieve this? Furth ...

What methods can I use to accomplish the transformation of superimposed images?

Struggling with transforming a content box on my webpage. I have a div containing three overlapping images positioned using Grid, and I want to scale one of them to fill the entire div when scrolled over. While I managed to achieve this effect, I'm un ...

Creating a dynamic rectangular design with a taller height than width, featuring perfectly centered content

My website needs a responsive rectangle where I can easily adjust the height and width. However, when I try to rotate the rectangle, the content also rotates 90 degrees. Can anyone help me with this issue? Thank you in advance for any assistance. Snippet ...

What is the best way to align product cards side by side instead of stacking them on separate lines?

I am currently working on a mock-up website for a school project. For this project, I am developing a products page where I intend to showcase the items available for sale. Although I managed to successfully copy a template from w3schools, my challenge lie ...

The Bootstrap 4 column is not floating properly to the right as it is leaving a gap on the

My right sidebar is not floating to the right and has space from the right side. You can view it at this link: <div class="col-md-2 col-lg-2 col-sm-2" id="right-sidebar" style="background-color:orange; float: right; right: 0!important; width: 100%;"& ...

The results of running 'npm run dev' and 'npm run build prod' are different from each other

Currently, I am in the process of developing a progressive web app using Vue.js. During development, I utilize the command npm run dev to initiate the local server that serves the files over at http://localhost:8080/. When it comes time to build for produ ...

Generating numerous checkboxes dynamically

Seeking assistance with a jQuery function that dynamically generates or clones checkboxes. The challenge is to display the sub_item checkbox when the main_item checkbox is checked. For a demonstration, you can visit this DEMO Jquery $('#btnAdd' ...

Issues with @font-face and @font-family not being recognized

I've been attempting to achieve a simple task: adding 3 different fonts to an HTML page. After browsing through numerous examples, I still haven't found a solution to my issue. It's possible that I may be missing something in how it's ...

Create numerous files simultaneously with the help of Laravel and AJAX

I am working on a project where I need to handle multiple checkboxes. My goal is to generate a document file for each checked element when I click on an item. To achieve this, I am sending multiple ids with my ajax request and then generating multiple do ...

What is the best way to structure Vue.js components for optimal organization?

Imagine having an index page called index.vue consisting of various components like this: index.vue <template> <div> <component-1 /> <section class="section-1"> <div class="container section-container"> <com ...

What is the best way to retrieve the color of a WebElement when dealing with a complex CSS structure in Webdriver

I am currently trying to determine if the color of a specific page changes immediately after clicking on a button designed to alter the color of an element within that page. My goal is to extract the RGB value stated as rgb(183,168,168); in this particul ...

ui-jq flot graph with lazy loading

I am working with this HTML code: <div id="test" ui-jq="plot" ui-options=" [ { data: {{line}}, points: { show: true, radius: 6}, splines: { show: true, tension: 0.45, lineWidth: 5, fill: 0 }, label: 'Akademi' }, ], { ...

The functionality of Bootstrap Tabs is compromised when used within a jQuery-UI dialog window

My goal is to develop a user interface similar to MDI for my application. To achieve this, I am utilizing the dialog feature of the jQuery UI library. To dynamically create a dialog window on demand, I have coded a helper function as shown below: functio ...

Use Javascript or Jquery to dynamically change the background color of cells in HTML tables based on their numerical

I am working with a collection of HTML tables that contain numbers presented in a specific style: <table border="1"> <tr> <th>Day</th> <th>Time</th> <th>A</th> <th>B</th> &l ...

Formatting that differs based on whether the content appears on the left

I'm in search of a solution to align specific items to the left on left-hand pages and to the right on right-hand pages. I have come across @page :left/:right, but it seems to only affect the page layout and margins, not the actual content on the page ...

I'm curious about how to use JQuery to pinpoint the firstName within a JSON String and retrieve its corresponding ID

Does anyone have an idea about the outcome in the alert? Is it a regular string, an object, or JSON? How can I select one of the entities and find another based on that selection? For example, I want to choose the first name and retrieve the ID from it. It ...

The troubleshooting of compatibility issues between TailwindCSS and HTML Input and Button tags

Recently, I decided to switch from using plain CSS to TailwindCSS for styling the navbar component that I obtained from the Bootstrap website. While TailwindCSS has helped me style most parts of the navbar successfully, I have encountered a challenge with ...

Using Javascript to send key codes to an HTML <textarea> element

I'm having trouble figuring out how to initiate a keydown event on a textarea element. For example, I have two textarea elements and I want the second box to display whatever is typed in the first one. However, for some reason, I need to do this using ...

Iterate over JSON elements beginning with a specific pattern

What is the best way to iterate through JSON objects that specifically start with a certain format? For example, if we have a JSON structure like this: { "END": true, "Lines": "End Reached", "term0": { "PrincipalTranslations": { // nest ...