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

Implementing a Dependent Dropdownlist in MVC4 Razor: A Step-by-Step Guide

In my MVC4+Razor View project, I am working on implementing dependent drop-down lists. These lists include Country, State, and City, all of which are sourced from a database. My goal is to populate the Country list from the database, and upon selecting a c ...

Utilizing $.getJSON to initiate a selection change event

I'm currently working on implementing a feature that involves adding categories to a dropdown list using jQuery Ajax. The goal is to load subcategories when a particular option is selected. However, I've encountered an issue where the addition o ...

Issue: In Firefox, resizing elements using position:absolute does not work as expected

My resizable div code looks like this: #box { height: 10rem; width: 10rem; resize: both; overflow: hidden; border: solid black 0.5rem; position: absolute; pointer-events: none; } <div id="item"></div> While it works perfectly ...

Various settings in JQuery UI Slider

Does anyone know how to customize the steps in a jQuery UI slider? I want to set specific values as steps, like 0, 1200, 2000, 2200, and 3000. Any suggestions on how to achieve this? const rangeSliderInit = () => { const valueArray = [0, 400, 1000, 1 ...

Dispatching identification to controller after submission

I am encountering an issue with a page that contains the following code: <div class="col-sm-2 displaybutton"> <div data-point-to="displaysHeader"> @using (Html.BeginForm("Administration", "Home", FormMethod.Post)) ...

Are there any options available for customizing the animation settings on the UI-bootstrap's carousel feature?

If you're interested in seeing an example of the standard configuration, check out this link. It's surprising how scarce the documentation is for many of the features that the UIB team has developed... I'm curious if anyone here has experie ...

Tips for stopping the textarea from moving around as you type and avoid it hitting the bottom of the page: Utilize JQuery and

As I type into the auto-sizing textarea, the text runs to the bottom of the page and causes it to dance uncontrollably with each key press. This forces me to constantly scroll down to see what's happening. How can I prevent this page dancing and keep ...

Acquiring HTML form data using JavaScript

Although it may seem trivial, I'm facing a challenge. I have an HTML form that is dynamically generated by JavaScript and populated with initial data fetched from the server. The form is displayed correctly with the pre-filled data. My goal is to allo ...

Exploring the framework and architecture of JSON, AJAX, PHP, and MySQL

I'm embarking on a new project and looking to incorporate ajax to fetch mysql results in json format for proper display using jQuery ajax. Being inexperienced with json, ajax, and jquery, I seek feedback on the adequacy of my design structure and any ...

Updating the hyperlink of an html element using css

I am looking to update this A tag <a href="contact.html" >Contact</a> to <a href="tel:+13174562564" >Contact</a> using only CSS, if possible. Alternatively, like this <a href="tel:+13174562564" >+13174562564</a> ...

Enhance your viewing experience by magnifying a specific element, all while maintaining full control to navigate

Is it possible to create a zoom effect on a webpage that focuses on one specific element while still allowing for navigation and scrolling? I have searched online for plugins like Fancybox and Zoomooz, but none of them offer the functionality I need. I sp ...

Parent whose height is less than that of the child element

I'm working on creating a side menu similar to the one on this website. However, I'm facing an issue with the height of the #parent list element. I want it to match the exact same height as its content (the #child span - check out this jsfiddle). ...

Tips for retrieving values from numerous checkboxes sharing the same class using jQuery

Currently, I am struggling with getting the values of all checkboxes that are checked using jquery. My goal is to store these values in an array, but I am encountering difficulties. Can anyone provide me with guidance on how to achieve this? Below is what ...

Activating a certain class to prompt a drop-down action

My PHP code is displaying data from my database, but there's a bug where both dropdown menus appear when I click the gear icon. I want only one dropdown to appear when clicking the gear of a specific project. Can you help me fix this issue? It's ...

Activate an iframe upon changing the media query

I am currently working on a webpage where I have included an image within an iframe. I am looking to change the content displayed inside the iframe based on different media query breakpoints. For instance, if the viewport has a minimum width of 900px, I ...

Enhance parent style when child's data-state or aria-checked attributes are updated in React using Styled Components

Within a label, there is a button embedded as shown below: <MyLabel htmlFor='xx' onClick={() => onChange}> <MyButton id='xx' {...rest} /> Check it! </MyLabel> In the Developer Tools Elements section, the st ...

Issue with Slick Grid not updating after Ajax request

I need to update the data on a slick grid when a checkbox is clicked, using an ajax call to retrieve new data. However, I am facing issues where the slick grid does not refresh and the checkbox loses its state upon page load. Jsp: <c:if test="${info ...

Using .each function with .getJSON

Seeking to connect data from two different requests by nesting a .getJSON function within a .each function. Utilizing the Wistia video api to load videos with basic info and display the play_count in the "stats" JSON. Attempted code provided below is not ...

Moving an array in AngularJS from one file to another

As someone new to AngularJS, I am facing an issue with integrating two separate files that contain modules. Each file works fine individually - allowing me to perform operations on arrays of names. However, when switching views, the arrays remain stored un ...

What steps can be taken to enable automatic playback for this slider?

After downloading the slider from this site, I've been attempting to enable autoplay on this slider but have not had any success. Can anyone provide guidance on how I can achieve this? I've tried modifying the code below without achieving the des ...