CODEWITHSUNDEEP
jquery
user781916
user781916

Reputation:

Jquery selector returning html element

I am trying to iterate through a collection of elements, trying to locate a specific element and apply a class to that element. The problem is that, even though the selector returns a collection of objects, and does enter the conditional that applies the class, when looking at the source the class is not applied.

This is the function:

function HighlightNav() {

$('.quick-launch-nav').css('visibility', 'visible');
var navitems = $('a.topnav-item[href]');
$(navitems).each(function () {
    var item = this;
    var linkUrl = item.href;
    var webUrl = IPC_siteUrl + IPC_webUrl;

    if (webUrl.match('^' + linkUrl)) {
        $(item).addClass('topnavselected');
        var parent = $(item).parent('.topnav-item');
        $(parent).addClass('topnavselected');
    }
});
}

When I try to debug it by looking at the inner html, it returns a javascript function and not what I expected.

Am I doing something wrong here?

Here is the markup. FYI its SharePoint so its ugly.

<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="zz1_TopNavigationMenun0">
    <table class="topnav-item zz1_TopNavigationMenu_4" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
            <td style="white-space:nowrap;">
                <a class="zz1_TopNavigationMenu_1 topnav-item zz1_TopNavigationMenu_3"
                 href="http://webapp/en/about" 
                 accesskey="1" style="border-style:none;font-size:1em;">About</a>
            </td>
        </tr>
    </table>
</td>

And when I try to do $(item).html.toString() this is what I get:

function(a){return f.access(this,function(a){var c=this[0]||{},d=0,e=this.length;if(a===b)return c.nodeType===1?c.innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(;d<e;d++)c=this[d]||{},c.nodeType===1&&(f.cleanData(c.getElementsByTagName("*")),c.innerHTML=a);c=0}catch(g){}}c&&this.empty().append(a)},null,a,arguments.length)}"

Upvotes: 2

Views: 3708

Answers (2)

VisioN
VisioN

Reputation: 145408

Following your JavaScript code and HTML markup, the problem seems to be in this line:

var parent = $(item).parent('.topnav-item');

The selector .topnav-item should select the parent node with class name topnav-item. However, the parent item of each a item is td which does not have this class.

So, if you need to add topnavselected class to table node then you can use this:

var parent = $(item).parentsUntil('.topnav-item').parent();

So, the final code should look like:

function HighlightNav() {
    $('.quick-launch-nav').css('visibility', 'visible');
    $('a.topnav-item[href]').each(function() {
        var item = $(this);
        var linkUrl = this.href;
        var webUrl = IPC_siteUrl + IPC_webUrl;

        if (webUrl.match('^' + linkUrl)) {
            item.addClass('topnavselected');
            var parent = item.parentsUntil('.topnav-item').parent();
            parent.addClass('topnavselected');
        }
    });
}​

Upvotes: 1

Mike Fielden
Mike Fielden

Reputation: 10153

item will be an html element inside the each. If you want a jQuery object, which it looks like you do:

$(item) will give you that inside the each

Upvotes: 0

Related Questions