使用jQuery匹配類

我有兩個無序列表，有點像：使用jQuery匹配類

<ul class="list1"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li class="current">Item 4</li> 
    <li>Item 5</li> 
</ul> 

<ul class="list2"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
</ul>

，並且目標是，使用jQuery，以確定哪些李標有「當前」類，然後添加一個類第二個列表到相應的li。我無法想象如何做到這一點。

謝謝。

來源

2010-03-18 Meep3D

你是什麼意思相應？內容（「項目4」）或位置？ – 2010-03-18 14:04:34

從評論他似乎意味着**位置**。 – 2010-03-18 14:24:01

$('ul.list2 li:nth-child(' + $('ul.list1 li.current').index() + ')').addClass('current');

或者你可以讓它少一點噁心：

$('ul.list2 li').eq($('ul.list1 li.current').index()).addClass('current');

第二個，我更喜歡，現在我能看到他們兩個:-)這裏的技巧是：

「eq」過濾器可以讓你從基於索引的jQuery列表中選擇一個元素;
「索引」功能可以讓您找到元素相對於它的兄弟姐妹一個在DOM

來源

2010-03-18 14:04:23 Pointy

太棒了，謝謝！ – Meep3D 2010-03-18 14:25:41

-1

$('li.current + li').addClass('yourClass')

編輯索引：問題

var index = $.inArray($('li.current')[0],$('li.current').parent().children()); 
$('ul:eq(1) li:eq('+index+')').addClass('selected');

來源

2010-03-18 14:10:24 markcial

這是一個有效的jQuery選擇器嗎？選擇器中'+' - 符號的含義是什麼。以及爲何/爲什麼應該這樣做？ – jitter 2010-03-18 14:13:32

@jitter：http://api.jquery.com/next-adjacent-Selector/它是有效的，但沒有選擇正確的元素。 – 2010-03-18 14:17:24

// Find the current item in the first list, remember its text 
var textToMatch = $('ul.list1 li.current').text(); 
// Loop through each li in the second list 
$('ul.list2 li').each(function(index, domElement){ 
    var curr = $(domElement); 
    // if the text matchs the first then add our class 
    if(textToMatch == curr.text()){ 
      curr.addClass('NEWCLASS'); 
    } 
});

的誤解編輯1：這是回答錯誤的問題，這個問題已經澄清，我會離開這裏，因爲它仍然看起來不錯:)

EDIT2：按照Flex，這是一個更好的方法來實現同樣的事情，再次不是什麼問題後。

$('.list2 li:contains("' + // Find an li in list2 which contains 
    $('.list1 li.current').text() + '")') // the same text as the as the current li in list1 
    .addClass("NEWCLASS"); // and add our new class to it

來源

2010-03-18 14:11:50

我假定我們在哪裏用相同的文本尋找第二個列表的元素。其他答案假設你的意思是在第二個列表中的相同索引的元素。 – 2010-03-18 14:13:51

對不起，不清楚 - 這是相同的索引（不一定是文本） – Meep3D 2010-03-18 14:20:51

這可以用'：contains'：'$（'。list2 li：contains（''+ $（'li.current'）。（）+'「）'）。addClass（」whatever「）' – 2010-03-18 14:21:12

只需簡單地使用：

var initialIndex = $('.list1 .current').index(); 
$('.list2 li').eq(initialIndex).addClass('current');

來源

2010-03-18 14:23:39 XGreen

使用jQuery匹配類

回答

相關問題