2016-05-25 55 views
0

我有一個HTML片段如下元素:最近的功能和提取

<div id="samplediv"> 
    <ul> 
    <li name="A"> 
    <a id="A"> 
    </li> 

    <li name="B"> 
    <a id="B"> 
    </li> 
    </ul> 
</div> 

我有一個叫文:

var text = "B"; 

我已經要檢查,如果文本與任何相匹配li的元素,並添加一個類名稱「禁用」的錨元素與文本不匹配。 我我來說,我想添加一個名爲「禁用」類

<a id="A">

這是我曾嘗試:

$("#samplediv li").each(function() { 

if($(this).name != text){ 
    $(this).closest("a").addClass("disabled"); 
} 
}); 

但這裏的東西是$(this).name正在評估對"undefined" 。我錯過了什麼?

編輯:由於錯字,已經錯過了標籤

+2

HTML是無效的李是UL的孩子 – guradio

+0

'this.name'可以使用,但'name'屬性使用'form'元素 –

回答

2

有多種問題,

  • $(this)返回不具有name財產jQuery對象,而是可以使用$(this).attr('name')
  • .closest()用於查找祖先元素,但ali元素的後代,因此您需要使用find()

你可以找到所有不具有給定的名稱,然後找到其中的a元素像

var text = 'B'; 
 
$("#samplediv li").not('[name="' + text + '"]').find("a").addClass("disabled");
a.disabled { 
 
    color: green; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="samplediv"> 
 
    <ul> 
 
    <li name="A"> 
 
     <a id="A">a</a> 
 
    </li> 
 

 
    <li name="B"> 
 
     <a id="B">b</a> 
 
    </li> 
 
    </ul> 
 
</div>

1

var text = "B"; 
 
$("#samplediv li").filter(function() {//use filter 
 
    return $(this).attr('name') != text;//use .attr() to get name attribute 
 

 
}).find('a').addClass("disabled");//use find to get the anchor tag
.disabled{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="samplediv"> 
 
    <ul> 
 
    <li name="A"> 
 
     <a id="A">a</a> 
 
    </li> 
 

 
    <li name="B"> 
 
     <a id="B">b</a> 
 
    </li> 
 
    </ul> 
 
</div>

li元素使用.filter()

說明:將匹配元素的集合減少爲匹配選擇器或通過函數測試的元素。

+0

雖然這是一個有效的答案,但它沒有解釋 – Li357

+0

@AndrewL我在回答澄清時有意見 – guradio