jQuery來檢查LI的內容 - 添加基於內容的特定類 - 麻煩與jQuery的$（this）

我是一個jQuery初學者，但我需要風格的前端CMS和改變HTML不是一個選項，所以jQuery來拯救！我將根據LI中的文本向LI添加一個類。

我可以使用jQuery的$（this）對象幫助一下。例如，下面的代碼工作：

if ($('div.nav ul li:nth-child(2):contains("About")').length > 0) { 
    $('div.nav ul li:nth-child(2)').addClass("about"); 
}

但爲了不重複成倍我的代碼，我寧願寫的是這樣的：

if ($('div.nav ul li:nth-child(2):contains("About")').length > 0) { 
    $(this).addClass("about"); 
}

然而，這是行不通的。我確信我正在屠殺一些非常明顯的東西，但我已經閱讀了關於$（this）對象的一些教程，並且我一直盯着我的代碼足夠長的時間來請求一些幫助:)

另外，也許我錯過了一個更簡單的解決方案。假設我有以下標記。

<ul id="nav"> 
<li>About</li> 
<li>Contact</li> 
<li>News</li> 
</ul>

現在讓我們假設這個導航可能會在未來改變，所以我不能簡單地指定一個類/圖標，每個L1利用只不過是第n個孩子。有沒有一種方法可以循環遍歷每個LI，然後遍歷每個條件？我不使用jQuery不夠熟悉，但我的英語和jQuery的組合，可能是這個樣子：

loop through #nav:each li { 
    if (child:contains("About")').length > 0) { 
     $(this).addClass("about"); 
    } 
    if (child:contains("Contact")').length > 0) { 
     $(this).addClass("contact"); 
    } 
    if (child:contains("News")').length > 0) { 
     $(this).addClass("news"); 
    } 
}

不幸的是，這只是由語法！任何人都可以幫助我在REAL jQuery中編寫:)如果是這樣，我可以幫助你解決任何你可能遇到的CSS問題。

謝謝！

來源

2012-01-17 LearnWebCode

您不需要遍歷li元素。使用您發佈的樣本標記，您可以向關於li元素添加類。

$('#nav li:contains(About)').addClass('about')

沖洗並重復兩次，其他兩個項目。

$('#nav li:contains(Contact)').addClass('contact') 
$('#nav li:contains(News)').addClass('news')

來源

2012-01-17 19:37:26 Anurag

哦哇，太棒了！這樣緊湊的代碼和它完成工作一樣，謝謝！ – LearnWebCode 2012-01-17 19:57:14

在您的第一個代碼片段this沒有指向您期望的DOM元素，但它主要是執行該代碼的實例，因此它不起作用。

您可以使用$.each循環並查找每個循環並應用該類。在這種情況下，您可以看到使用$(this)。

$('#nav > li').each(function(){ 

    if ($(this).filter(':contains("About")').length > 0) { 
     $(this).addClass("about"); 
    } 
    else if ($(this).filter(':contains("Contact")').length > 0) { 
     $(this).addClass("contact"); 
    } 
    else if ($(this).filter(':contains("News")').length > 0) { 
     $(this).addClass("news"); 
    } 
});

來源

2012-01-17 19:37:10 ShankarSangoli

非常感謝！這正是我所期待的！ – LearnWebCode 2012-01-17 19:56:43

如果此答案解決了您的問題，請將其標記爲接受的答案。 – mccow002 2012-01-18 15:50:33

$（this）僅適用於函數。它是對函數被調用的元素的引用。 if語句不是函數，因此，如果不適用。相反，您可以執行可變緩存，如下所示：

var $aboutItem = $('div.nav ul li:nth-child(2):contains("About")'); 
if($aboutItem.length > 0) { 
    $aboutItem.addClass("about"); 
}

來源

2012-01-17 19:37:26 mccow002

jQuery each（）函數允許您遍歷集合。 $（this）對象將引用迭代中的當前元素。假設你的類將永遠匹配內容，這段代碼將起作用。否則，您可以爲這些類創建一個switch語句。

$("ul#nav li").each(function(){ 
    var txt = $(this).text(); 
    $(this).addClass(txt.toLowerCase()); 
});

來源

2012-01-17 19:39:08 swatkins

爲元方法+1。 – Anurag 2012-01-17 20:04:56

jQuery來檢查LI的內容 - 添加基於內容的特定類 - 麻煩與jQuery的$（this）

回答

相關問題