CODEWITHSUNDEEP
javascriptjquery
Treadstone
Treadstone

Reputation: 35

Issue with selectors and conditionals in jQuery

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:

  1. 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.
  2. 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:

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!

Upvotes: -1

Views: 212

Answers (2)

Tats_innit
Tats_innit

Reputation: 34117

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");

Upvotes: 1

zerkms
zerkms

Reputation: 255155

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

Upvotes: 2

Related Questions