2013-04-24 82 views
0

我需要在第一個標籤後立即添加一個類到div。在標籤後立即選擇div

我的HTML是這樣的:

<label class="twc-first active">3DTV</label> 
<div class="content mobile"> 
    <ul class="content"> 
    </ul> 
    <h3>Secondary Topic Content</h3> 
    <ul class="secondaryContent"> 
    </ul> 
</div> 

<label>Auto HD</label> 
<div class="content"> 
    <ul class="content"> 
    </ul> 
    <h3>Secondary Topic Content</h3> 
    <ul class="secondaryContent"> 
    </ul> 
</div> 

我已經使用了jQuery找出標籤:第一,添加類TWC-第一和活躍。我現在需要的就是抓住

<div class="content"> 

,並使其:

沒有運氣 .closest().next()等:

<label class="twc-first active">. 

我試過多種組合後

<div class="content mobile"> 
立即

我覺得這很接近,但它絕對不是雪茄。 (第一兩條線在這一點上出色的工作)

$('.twc-FAQTopics label:first').addClass('twc-first').addClass('active'); 
$('.twc-FAQTopics label:last').addClass('twc-last'); 

$('.twc-FAQTopics label:first').next('div.content').addClass('mobile'); 
+1

這應該工作http://jsfiddle.net/brsvK/1 – Musa 2013-04-24 18:40:19

+0

順便說一句,我可以指出,一個'label'用於'[識別用戶界面中項目的標題](http://www.w3.org/wiki/HTML/Elements/label)',專門用於將文本與給定的「輸入」相關聯(或'textarea'或'select')元素;不是一個標題。我認爲,從我所看到的情況來看,你應該考慮使用標題元素之一'h1'到'h6'(儘管你有兩個元素,可能不是'h1')。 – 2013-04-24 19:03:37

回答

1

您可以使用.next()找到從標籤股利。我沒有看到任何理由使用:first作爲選擇器,但是因爲第一個標籤已經有了一個類,而第二個標籤沒有。

$('label.twc-first').next('div.content').addClass('someClass'); 

See the behavior here

+0

忘記了最初的選擇後'.' :) – tymeJV 2013-04-24 18:34:54

+0

謝謝你的頭了:) – 2013-04-24 18:35:48

+0

'找到()'只着眼於後人,而不是兄弟姐妹。考慮重新閱讀[API](http://api.jquery.com/find/)。 – 2013-04-24 18:35:54

1

.next()只有作品如果div立即爲label後。

如果在labeldiv之間存在另一個元素,它將不起作用。
DEMO:http://jsfiddle.net/dirtyd77/uPHk6/6/

否則,你將不得不使用.nextAll()

$('label:first').nextAll('div:eq(0)').addClass('classHere')

DEMO: http://jsfiddle.net/dirtyd77/uPHk6/7/


UPDATE:

您還可以使用Next Siblings Selector (~)

//without :first in div:first, it will return all subsequent divs 
$('label:first ~ div:first').addClass('classHere'); 

DEMO: http://jsfiddle.net/dirtyd77/uPHk6/10/

+0

大教堂,感謝解釋的.next()和.nextAll()之間的差異 - 有幫助,以及 – 2013-04-24 19:22:18

相關問題