Writing a loop with JQUERY

Question

I want to check whether an element has no hrefs in it (ie it is empty) and if it is, to hide the label associated with it. There will be several elements on the page that need to be checked if they are empty so I will need to write a loop. I need help writing the loop please. Here is my code so far:

if(jQuery('span.tags').is(':empty')) {
        jQuery('span.label').hide()        
    };

Please can someone help me with this code?

This is my HTML

<div class="entry-meta">  
            <span class="label">Tagged:</span>
           <span class="tags"> 
            <a href="#" rel="tag">Career change</a>, 
            <a href="#" rel="tag">career change e course</a>, 
            <a href="#" rel="tag">career help</a>
           </span>
    </div><!-- END .entry-meta -->

Thanks to everyone who answered this post. Thisis the solution that worked.

//Removes word 'Tagged:' if there are no tags
jQuery('span.tags:empty').prev('span.label').hide();

possible duplicate of How to perform a " For " loop in jquery? — Felix Kling
– Felix Kling, Commented Jun 16, 2011 at 9:46
Can you give an example of an empty tag too? It's not clear from your question whether the empty tags have no href attribute at all, or simply an empty href. — Town
– Town, Commented Jun 16, 2011 at 10:21
Hello Town, did you remove your answer? Your solution works perfectly, thank you! By the way, the empty tags did not have hrefs at all. — madameFerry
– madameFerry, Commented Jun 16, 2011 at 10:24

Josh · Accepted Answer · 2011-06-16 09:49:09Z

1

You can use the each function to loop through DOM elements, and hide each one.

$('span.tags:empty').each(function(i, value) {
    $('span.label').hide();
});

answered Jun 16, 2011 at 9:49

Josh

1,8043 gold badges17 silver badges31 bronze badges

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

3 Comments

madameFerry Over a year ago

Thanks, Josh, I tried that but it removes the span.label even if they are not empty.

Felix Kling Over a year ago

@madame: Because $('span.label') selects every span.label element. See @richardneililagan's answer.

Richard Neil Ilagan Over a year ago

That won't work because you're selecting every span.label in the DOM inside your .each() function. You have to find some way to limit the span.labels you select to be related to the corresponding span.tags.

Richard Neil Ilagan · Accepted Answer · 2011-06-16 10:00:26Z

1

Based from your HTML, you should be able to pull this off even without throwing out an explicit loop.

// something like
$('span.tags').not(':has(a[href])')
              .prev('span.label')
              .hide()
              ;

answered Jun 16, 2011 at 10:00

Richard Neil Ilagan

14.8k6 gold badges52 silver badges68 bronze badges

2 Comments

madameFerry Over a year ago

Thanks Richard but this does not work. I still see the Tagged: label even if the element is empty.

Richard Neil Ilagan Over a year ago

Did you remember to put your jQuery code inside a $(document).ready() handler?

Alex · Accepted Answer · 2011-06-16 10:03:55Z

0

Very easy:

$('a').each(function(){
    if ($(this).attr('href') == ''){
        $(this).hide();
    }
});

Coded up using you example - http://jsfiddle.net/ajthomascouk/DfM79/

answered Jun 16, 2011 at 10:03

Alex

9,0612 gold badges29 silver badges44 bronze badges

2 Comments

Richard Neil Ilagan Over a year ago

... except that that hides the <a> elements, not the corresponding span.label.

Alex Over a year ago

my bad... let me relook at it.

Town · Accepted Answer · 2011-06-16 10:14:45Z

0

You shouldn't need a loop for that. Based on the assumption that your tags span will be empty if there are no tags, this will do it:

$('span.tags:empty').prev('span.label').hide();

Demo on jsfiddle

answered Jun 16, 2011 at 10:14

Town

14.9k3 gold badges50 silver badges72 bronze badges

1 Comment

user7892745 Over a year ago

Simple, neat, and fast.

Collectives™ on Stack Overflow

Writing a loop with JQUERY

4 Answers 4

3 Comments

2 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related