Using jQuery to add a class to an image element when the source attribute contains a specific

Question

Using jQuery to add a class to an image element when the source attribute contains a specific

I have a bunch of text that looks like this

<div id="justThisDIV"><p>Some paragraph <img src="http://mydomain.com/image.jpg"/> </p>
<p><img src="http://mydomain.com/wow.png"/></p>
<p><img src="http://notmydomain.com/blah.png"/> Wow this is boring</p></div>

Is there a way to assign a class to all images from my domain, meaning those with the URL mydomain.com within the DIV having the ID justThisDIV

I attempted the following without success

<script type="text/javascript">
    $(document).ready(function() {
        $("div#justThisDIV img[src*=mydomain.com]").addClass("full-width");

    });
</script>

Thank you

jquery css

Answer 1

Answer №1

ANSWER REVISED ONCE MORE

To achieve the desired result, incorporate the 'attribute contains' selector and utilize the .parent().attr('id') method along with a conditional statement to append it to the specific div.

$("img[src*='imgur']").each(function () {
    if($(this).parent().attr('id')  == "thisDiv") { $(this).addClass('mine')}
});

Alternatively, if you prefer adding the class to the container instead, simply adjust the reference as shown below:

$("img[src*='imgur']").each(function () {
    if($(this).parent().attr('id')  == "thisDiv") { $(this).parent().addClass('mine')}
});

DEMO - Apply a class to the image DEMO 2 - Assign a class to the image's container

Answer 2

ANSWER REVISED ONCE MORE

To achieve the desired result, incorporate the 'attribute contains' selector and utilize the .parent().attr('id') method along with a conditional statement to append it to the specific div.

$("img[src*='imgur']").each(function () {
    if($(this).parent().attr('id')  == "thisDiv") { $(this).addClass('mine')}
});

Alternatively, if you prefer adding the class to the container instead, simply adjust the reference as shown below:

$("img[src*='imgur']").each(function () {
    if($(this).parent().attr('id')  == "thisDiv") { $(this).parent().addClass('mine')}
});

DEMO - Apply a class to the image DEMO 2 - Assign a class to the image's container

Answer 3

Answer №2

Look no further, this is the solution you've been searching for

$('img')
    .filter(function() {
        return this.src.match(/^http:\/\/mydomain.com/);
    })
   .addClass("full-width");

Check out the demonstration on jsfiddle: http://jsfiddle.net/9ZABC/

Answer 4

Look no further, this is the solution you've been searching for

$('img')
    .filter(function() {
        return this.src.match(/^http:\/\/mydomain.com/);
    })
   .addClass("full-width");

Check out the demonstration on jsfiddle: http://jsfiddle.net/9ZABC/

Answer 5

Answer №3

If you want to experiment with selecting attributes that start with a specific value, here's an example for you to try out:
Example:

$( "div[data-start^='example']" ).addClass('highlight');

For more information on this topic, check out: http://api.jquery.com/attribute-starts-with-selector/

Answer 6

If you want to experiment with selecting attributes that start with a specific value, here's an example for you to try out:
Example:

$( "div[data-start^='example']" ).addClass('highlight');

For more information on this topic, check out: http://api.jquery.com/attribute-starts-with-selector/

Answer 7

Answer №4

A good practice is to avoid triggering functions on DOM elements that may not be present. It's important to first check if they exist before taking any action.

var $img = $('img[src*="mydomain.com"]');

// Check if at least one image you need exists
if ($img.length) {
    $img.each(function() {
        // Add custom class to each img tag
        $(this).addClass('my_class');
    });
}

While it is possible to add the class directly with the following line:

$('img[src*="mydomain.com"]').addClass('my_class');

I believe it's better to:

verify the existence of the elements
keep the code clear and easy to understand
make the code easily adaptable for potential future operations on the images

Answer 8

A good practice is to avoid triggering functions on DOM elements that may not be present. It's important to first check if they exist before taking any action.

var $img = $('img[src*="mydomain.com"]');

// Check if at least one image you need exists
if ($img.length) {
    $img.each(function() {
        // Add custom class to each img tag
        $(this).addClass('my_class');
    });
}

While it is possible to add the class directly with the following line:

$('img[src*="mydomain.com"]').addClass('my_class');

I believe it's better to:

verify the existence of the elements
keep the code clear and easy to understand
make the code easily adaptable for potential future operations on the images

Using jQuery to add a class to an image element when the source attribute contains a specific

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

An AJAX event handling function returns a null value upon invocation

Looking for a different method to remove a list item within an unordered list using CSS instead of HTML

Can a horizontal navigation bar be designed to span the full width of the page without relying on a table?

SheetJS is experiencing difficulties parsing dates correctly

What is the best way to style a tooltip in an ASP.NET application using CSS?

Is it possible to retrieve JavaScript object properties using HTML elements?

What are some ways I can customize the appearance of a Bootstrap 5 Navbar specifically when it is in the collapsed

Invokeing JQ's on() function to trigger a click event on a concealed Google Infobox.Js

What causes an Undefined array key error when using AJAX POST?

The issue with EJS Header and Footer not showing up on the

Is there a way to trigger a function after a tooltip or popover is generated using Twitter Bootstrap?

Show button image beyond the limits of the hyperlink

A simple guide on how to surround every incorrect input index in mapped inputs with red borders

My current objective is to extract the information from a specific item within a combobox by implementing the following code

Automatic switching between Bootstrap 5 tab panes at precise time intervals

CSS Tricks: Placing a Panel Just Off the Page Edge

Galaxy S5 browsers experiencing issues with website responsiveness

Splitting a list of accordions into two columns with CSS and React - a step-by-step guide!

What could be causing my divs to overlap?

Utilizing static HTML, CSS, and JavaScript for secure backend administrative control