Issue with selectors and conditionals in jQuery

Question

I have a simple HTML template that's used multiple times across the document. It's essentially the following div element wrapping around several p elements and another div element with the class button. For visualization purposes, here's an example:

<div class="content">    
    <p>First paragraph</p>
    <p>Second paragraph</p>

    <div><a class="button" href="http://www.apple.com/ipad/">Change me jQuery!</a></div>
</div>

<div class="content">    
    <p>First paragraph</p>
    <p>Second paragraph</p>

    <div><a class="button" href="http://www.apple.com/iphone/">Change me jQuery!</a></div>
</div>

Now, the users who will use this template to publish content on the site not always will use the same exact url in that anchor tag, but I do know exactly which ones they can use. So what I'm trying to do with my code is the following:

Once the content has been published and the anchor tag given a url address, I want to check that address and see if there's a specific word in it. If that word is found, then change the anchor text to something of my choice.
Do the same again but this time checking for a different word in the url string.

Here's what I've written:

$('.content').each(function () {
    var $this = $(this),
        $findP = $this.find('p');

    if ($findP.length > 2) {
        // Run some code
    } else if ( ($findP.length <= 2) && ($('a[href*="ipad"]')) ) {
        $this.find('a.button').text('Visit iPad site');
    } else if ( ($findP.length <= 2) && ($('a[href*="iphone"]')) ) {
        $this.find('a.button').text('Visit iPhone site');
    }
});

Issues:

Both anchor tags' text only change to the string of text that I've written in the first else if statement inside the .text() jQuery method. In my example here, the first anchor tag should take the text "Visit iPad site" while the second one should be "Visit iPhone site". Here's a working fiddle of this example: http://jsfiddle.net/vj4xZ/1/

I'm guessing the issue is here that once the first element is found, all anchor tags are assigned what's in the .text() method and the code stops right there without looking for the what's in the second else if statement. If that's the case, or the issue at hand is something else, then how can I get that to working properly? Any help with this will be appreciated. Thank you for your time!

zerkms · Accepted Answer · 2012-05-29 04:03:07Z

2

http://jsfiddle.net/zerkms/vj4xZ/2/

You need to change your conditions to this:

} else if ( ($findP.length <= 2) && ($this.find('a[href*="ipad"]').length) ) {

$('a[href*="ipad"]') - means - if there is an anchor with ipad in href somewhere in the document

What I changed - is limited searching the anchor only by current element with $this.find()

You may also use $('a[href*="ipad"]', $this) instead, it would do the same work

answered May 29, 2012 at 4:03

zerkms

256k73 gold badges447 silver badges551 bronze badges

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

3 Comments

Tats_innit Over a year ago

Hiya @zerkms howz it bruv, can you please see my answer below it suffice the needs of what OP asked "+1 I thought of the same thing before hand" Cheers man!

Treadstone Over a year ago

Seconds after I posted the question I thought about the problem that you highlighted with my conditions, and I'm glad you've solved it. Thanks a lot! I've also tried the second option you mentioned but I can't get it to work unfortunately.

Treadstone Over a year ago

@zerkms: got you. Thanks one more time.

Tats_innit · Accepted Answer · 2012-05-29 04:28:35Z

1

Hiya made a lil different demo here: http://jsfiddle.net/bKJfq/15/

Above demo uses one of this selector: http://api.jquery.com/category/selectors/

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

once the selector matches it will change the text to the desired text you want.

This can very well be less verbose way; Please let me know if I missed anything.

Hope this helps B-)

code

   $('a[href*="ipad"]').text("Visit iPad site");
   $('a[href*="iphone"]').text("Visit iPhone site");

edited May 29, 2012 at 4:28

answered May 29, 2012 at 4:22

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

1 Comment

Treadstone Over a year ago

Yeah you got this right, and it's indeed less verbose coding. Thank you!

Collectives™ on Stack Overflow

Issue with selectors and conditionals in jQuery

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related