Question

I’m a complete novice when it comes to jQuery, so please bear with me…

I have this HTML

<ul class="zoneSubscriptions">
  <li>
    <ul>
      <li class="zoneName"><a href="/Default.aspx?PageID=8267303">My Account</a></li>
      <li>Never</li>
    </ul>
  </li>
  <li>
    <ul>
      <li class="zoneName"><a href="/Default.aspx?PageID=8269026">Practitioners Area</a></li>
      <li>Never</li>
    </ul>
  </li>
</ul>

If the link for Practitioners Area is present, redirect the browser to that href, else, redirect to the My Account section.

This is the jQuery I have…

jQuery.noConflict();
jQuery(document).ready(function() {

    if(jQuery(".zoneName a").text() == 'Practitioners Area'){
        document.location.href = $(this).attr('href');

    }else{
        document.location.href = jQuery('.zoneName:first a').attr('href');
    };


});

When it runs, it just redirects me to the My Account, even though the Practioners Area is present.

I know I’m probably doing something really stupid… But can anyone help me and show me the light? Would be much appreciated! Thanks!

Answer 1

Change the condition in your if statement to this:

$(".zoneName a:contains('Practitioners Area')").length

The problem with your attempt is that jQuery(".zoneName a").text() will return the text of all matched elements (in your case, it returns something like “My AccountPractioners Area”). This version checks to see if there are any matching elements containing the string “Practioners Area”. Here’s the full code:

jQuery(document).ready(function() {

    if($(".zoneName a:contains('Practitioners Area')").length) {
        document.location.href = $(this).attr('href');

    }else{
        document.location.href = jQuery('.zoneName:first a').attr('href');
    };
});