jquery：nth類型動作

我使用jquery nth-of-type使div滑動上下（slideToggle()和click()）。問題是，當我嘗試一下的東西，打開的標籤之一，他們不開。jquery：nth類型動作

HTML：

<div id="tabs-wrapper"> 
    <div class="op">Tab One</div> 
    <div class="op">Tab Two</div> 
    <div class="op">Tab Three</div> 
    <div class="tab">Pattern One</div> 
    <div class="tab">Pattern One</div> 
    <div class="tab">Pattern One</div> 
</div>

JS：

$('.tab').hide(); 
$('.op:nth-of-type(1)').click(function(){ 
    $('.tab:nth-of-type(1)').slideToggle(); 
}); 
$('.op:nth-of-type(2)').click(function(){ 
    $('.tab:nth-of-type(2)').slideToggle(); 
}); 
$('.op:nth-of-type(3)').click(function(){ 
    $('.tab:nth-of-type(3)').slideToggle(); 
});

Fiddle

來源

2015-04-14 TricksfortheWeb

要獲得匹配，加上'3'到每個'.TAB的：第n-的-type's即_4_，_5_，_6_（但是這需要知道你已經有了3個標籤） –

的:nth-of-type()僞類只關注元素類型。您的「標籤」元素都不是第一，第二或第三<div>在它們的容器，所以沒有選擇匹配。

你可以，我想，這樣做：

$('.op:nth-of-type(3n+1)').click(function(){ 
    $('.tab:nth-of-type(3n+1)').slideToggle(); 
});

你必須確保在3當您添加了更新/刪除課程的標籤。

或者你可以這樣做：

$(".op").click(function() { 
    $(".tab").eq($(this).index()).slideToggle(); 
});

然後你只需要建立一個處理程序。

來源

2015-04-14 15:08:24 Pointy

所以不是我應該使用'$（'＃tabs-wrapper：nth-of-type（1）'）;'等等？ – TricksfortheWeb

@ yak613好吧，你可以這樣做，或者你可以考慮到3個「op」元素的存在。就我個人而言，我會去尋找可點擊元素和標籤之間更明確的關係。 – Pointy

目前尚不清楚爲什麼這會被低估;關於爲什麼選擇器什麼都不匹配，真的沒什麼可說的。 – Pointy

要完成尖尖的回答有一個例子：

$('.tab').hide(); 
$('.op:nth-of-type(1)').click(function(){ 
    $('div:nth-of-type(4)').slideToggle(); 
}); 
$('.op:nth-of-type(2)').click(function(){ 
    $('div:nth-of-type(5)').slideToggle(); 
}); 
$('.op:nth-of-type(3)').click(function(){ 
    $('div:nth-of-type(6)').slideToggle(); 
});

來源

2015-04-14 15:14:15 Snake

好吧，它現在正在工作。謝謝。 – TricksfortheWeb

它的工作，但更好的解決方案，我們不需要改變腳本，當我們想要添加另一個選項卡:-) – panther

您可以使用:eq選擇爲好。然後元件將計數正如所料，0-2（索引值爲從0）。

$('.tab').hide(); 
$('.op:eq(0)').click(function(){ 
    $('.tab:eq(0)').slideToggle(); 
}); 
$('.op:eq(1)').click(function(){ 
    $('.tab:eq(1)').slideToggle(); 
}); 
$('.op:eq(2)').click(function(){ 
    $('.tab:eq(2)').slideToggle(); 
});

http://jsfiddle.net/rm9mkoau/6/

或短，不依賴於要素數量。

$('.tab').hide(); 
$('.op').click(function(){ 
    $('.tab:eq(' + $(this).index() + ')').slideToggle(); 
});

http://jsfiddle.net/rm9mkoau/8/

來源

2015-04-14 15:16:02 panther

Downvoter，請評論您的downvote。 – panther

你有尖尖的答案的解釋，但加了一點變化的解決方案，到目前爲止，你可以試試這個方法：

$('.op').click(function() { 
    var pos = $(this).parent().indexOf($(this)); 
    $('.tab').eq(pos).slideToggle(); 
});

這可以濃縮，但我已經把它放在一個更可讀的形式，所以你可以得到它在做什麼一握。

它'說'：「讓我這個點擊'op'元素的位置在它的父級中的所有其他元素中獲得所有'tab'元素，並滑動tab元素對應於的「OP」元素的位置被點擊「。

注意：這將針對您的標記中的任何.op和.tab元素，您可以選擇使其更具體。

來源

2015-04-14 15:18:16

的nth-of-type選擇中辨別僅基於該元素的名稱 - 不類。

的：第n的類型（一個+ b）的僞類表示法表示在文檔樹具有+ B-1的兄弟姐妹用相同的擴展元素名稱之前它的元件，對於任何n的零或正整數值，並且具有父元素。這裏 http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo

一種替代方法是使用jQuery :eq selector

$('.tab').hide(); 
$('.op:eq(0)').click(function(){ 
    $('.tab:eq(0)').slideToggle(); 
}); 
$('.op:eq(1)').click(function(){ 
    $('.tab:eq(1)').slideToggle(); 
}); 
$('.op:eq(2)').click(function(){ 
    $('.tab:eq(2)').slideToggle(); 
});

雖然一個更爲優雅的解決方案是使用jQuery.index具有相同指數的點擊.op選擇.tab。

$('#tabs-wrapper').on('click', '.op', function(){ 
    var $t = $(this), $tab; 
    $tab = $t.siblings('.tab').eq($t.index()); 
    $tab.slideToggle(); 
});

來源

2015-04-14 15:25:46 max

jquery：nth類型動作

回答

相關問題