JQuery selector возвращающий элемент html

Я пытаюсь выполнить итерацию по набору элементов, пытаясь найти конкретный элемент и применить класс к этому элементу. Проблема в том, что, хотя селектор возвращает коллекцию объектов и вводит условие, которое применяет класс, при просмотре источника класс не применяется.JQuery selector возвращающий элемент html

Это функция:

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'); 
    } 
}); 
}

Когда я пытаюсь отлаживать его, глядя на внутреннем HTML, она возвращает яваскрипт функции, а не то, что я ожидал.

Я делаю что-то неправильно здесь?

Вот разметка. FYI его SharePoint так уродливо.

<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>

И когда я пытаюсь сделать $ (пункт) .html.toString() это то, что я получаю:

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

источник

2012-05-01 John S

Не могли бы вы опубликовать разметку слишком ? – mattytommo

BTW, 'navitems' уже является объектом jQuery, вам не нужно снова' '$ (navitems)'. – VisioN

@mattytommo Я добавил разметку. –

После кода JavaScript и HTML-разметку, проблема, как представляется, в этой строке:

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

Селектор .topnav-item должен выбрать родительский узел с именем класса topnav-item. Однако родительский элемент каждого элемента a равен td, который не имеет этого класса.

Так что, если вам нужно добавить topnavselected класс table узел, то вы можете использовать это:

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

Таким образом, окончательный код должен выглядеть следующим образом:

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'); 
     } 
    }); 
}

источник

2012-05-01 16:34:53 VisioN

Если вы используете эту строку, то можете сделать снимок «$ (item) .addClass ('topnavselected'); класс по-прежнему не добавляется к этому элементу в html. –

@JohnS, попробуйте метод 'HighlightNav()' из обновленной версии ответа. Если условие 'webUrl.match (...)' работает правильно, классы должны быть добавлены. – VisioN

@JohnS, пожалуйста, прочитайте мой последний комментарий по вашему вопросу. – VisioN

item будет HTML элемент внутри each. Если вы хотите объект JQuery, который он выглядит, как вы делаете:

$(item) даст вам, что внутри каждого

источник

2012-05-01 16:22:38

Я не уверен, что я следую. Должен ли я заменить item = this на item = $ (this)? –

Да, все будет хорошо. –

JQuery selector возвращающий элемент html

ответ

Смежные вопросы