How to call JavaScript methods on jQuery objects

Question

Let's go straight to the point.

The following code must run on IE8, unfortunately.

It is supposed to find match the URL of the current page with the href attribute of the <a> tags present in the nav . Then swap the class of that tag from not-selected to selected or defaults to do it to the first <a> tag.

HTML

<ul id="nav">
    <li><a class="not-selected" href="index.php"><span>Index Page</span></a></li>
    <li>
        <a class="not-selected" href="page1.php"><span>Page 1</span></a>
    </li>
    <li>
        <a class="not-selected" href="page2.php"><span>Page 2</span></a>
    </li>
</ul>

JavaScript (jQuery)

var url = $(document).attr('URL');

var isIndexPage = true;

var menu = $('#nav').children('li');

var anchors = menu.find('a');

anchors.each(function(index) {

    //   Is the href the same as the page?
    if ($(this).href != null && anchor.href == url)
    {
        $(this).first().addClass('selected');
        if ($(this).className.match(/\bnot\-selected\b/))
        $(this).first().removeClass('not-selected');

        indexPage = false;
     }
     else
     {
         //   remove class="selected" if it has that class
         if ($(this).className.match(/\bselected\b/))
         {
             $(this).first().removeClass('selected');
         }
         //   Add class="trigger"
         $(this).first().addClass('not-selected');                    
      }
 });

 if (isIndexPage)
 {
     menu[0].childNodes[0].setAttribute('class', 'selected');
 }

On the script, I get an error on the line that calls the match() function on the className attribute (which should be a string).

Why is that?

How can I fix it with jQuery or JavaScript that works on IE8?

Thank you in advance.

Answer 1

className is a native property of HTML elements, whereas you're trying to call it as a property on a jQuery object. Do either:

$(this)[0].className

or

$(this).attr('class')

Sidenote: you're are not first checking whether the element has a class or not - you're assuming it has. The second (jQuery) approach will error if the element has no class attribute, as it returns null if none is found (as opposed to the native className property which, in the absence of a corresponding class attribute, defaults to an empty string.)

Answer 2

you can replace the lines

if ($(this).className.match(/\bselected\b/))

with this

if ($(this).hasClass('selected'));

It's much simpler. The same for class 'not-selected'.

Answer 3

There is no className property of the jQuery object, you would use the hasClass method to check if the element has a class:

if ($(this).hasClass('not-selected'))

However, you don't need that check at all. You can just remove the class, and if it's not there in the first place the call will just do nothing. You can just do it like this:

$(this).addClass('selected').removeClass('not-selected');

Similarly in the else block, you don't need to check, just remove and add:

$(this).removeClass('selected').addClass('not-selected');

---

Actually, you don't even need the if , you can do it using toggleClass and a boolean value. This would be your entire loop:

anchors.each(function() {
  var sel = $(this).href != null && $(this).href == url;
  $(this).toggleClass('selected', sel).toggleClass('not-selected', !sel);
});

---

Also, you are using the undefined variable anchor where you should use $(this) . Change this line:

if ($(this).href != null && anchor.href == url)

to:

if ($(this).href != null && $(this).href == url)

Answer 4

I think you should use plain JS for the URL and jQuery for the rest example:

JavaScript

var path = window.location.pathname;

$.each($('#nav li a'), function(index, anchor) {
    if(path.indexOf($(anchor).attr('href')) != -1) {
        $('#nav li a').removeClass('selected');
        $(anchor).addClass('selected').removeClass('not-selected');
    }
});

Here is an example: http://jsfiddle.net/2rSqL/