How do I apply css using jquery only when the element has a certain attribute?

Question

I'm trying to use jQuery to add some css to elements, but only if they have a certain attribute.

The reason why I'm not using just css is because the content for the site is too vast to go through and add classes to all the elements I want to style.

The jQuery code I'm using is this:

if ($('.body_text a').attr('name')) {
    $(this).css({
        'display': 'inline-block',
        'position': 'relative',
        'top': '-200px',
        'visibility': 'hidden'
    })
}

But this doesn't seem to be working. If I put an alert inside the if statement the alert works. Am I doing something wrong?

Per W3: The <a> name attribute is not supported in HTML5. Use the id attribute instead. — bpeterson76
– bpeterson76, Commented Jan 13, 2014 at 23:34

digitalextremist · Accepted Answer · 2014-01-13 23:33:38Z

2

This is the jQuery selector you're looking for:

//de or: $('.body_text a[name="value"]').css({
$('.body_text a[name]').css({
    'display': 'inline-block',
    'position': 'relative',
    'top': '-200px',
    'visibility': 'hidden'
})

http://api.jquery.com/attribute-equals-selector/

You can do this with CSS too:

.body_text a[name] {
    display: inline-block;
    position: relative;
    top: -200px;
    visibility: hidden;
 }

http://www.w3schools.com/css/css_attribute_selectors.asp

answered Jan 13, 2014 at 23:33

digitalextremist

5,9924 gold badges46 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

knrz · Accepted Answer · 2014-01-13 23:33:50Z

0

It's because $(this) doesn't actually refer to anything — It needs to be placed in a function to refer to something.

However, the following code goes through all as with a name attribute, and applies the styles to each one.

$('.body_text a[name]').css({
     'display': 'inline-block',
     'position': 'relative',
     'top': '-200px',
     'visibility': 'hidden'
})

answered Jan 13, 2014 at 23:33

knrz

1,8211 gold badge12 silver badges15 bronze badges

Comments

Hugo Sousa · Accepted Answer · 2014-01-13 23:35:34Z

0

Viewing the documentation:

The .attr() method gets the attribute value for only the first element in the matched set. To get the value for each element individually, use a looping construct such as jQuery's .each() or .map() method.

I guess this is your problem?

answered Jan 13, 2014 at 23:35

Hugo Sousa

1,9362 gold badges15 silver badges33 bronze badges

1 Comment

digitalextremist Over a year ago

Is this an answer? This seems like a comment.

digitalextremist · Accepted Answer · 2014-01-13 23:52:05Z

0

Try this it should do the trick:

if( $('.body_text a').attr('name') == "TEXT HERE" ){
     // Do something
} else {
     // Do Something else
}

Make sure to loop through using the .each on the element you are looking for.

$('.body_text a').each(function(){

edited Jan 13, 2014 at 23:52

digitalextremist

5,9924 gold badges46 silver badges64 bronze badges

answered Jan 13, 2014 at 23:33

Cam

1,90211 silver badges25 bronze badges

1 Comment

Cam Over a year ago

You can do this plainly with css though. .body_text a[name="Text Here] { followed by your css }

Collectives™ on Stack Overflow

How do I apply css using jquery only when the element has a certain attribute?

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related