我想顯示隱藏的行，在一個按鈕上點擊一個時間的時間，但他們都表現出一次，因爲他們有一流的「行」 - 第1行默認顯示其餘的都隱藏jQuery的顯示一個下一個兄弟在上點擊

我不能使用ID選擇，因爲它是服務器端和動態的，所以怎麼能直到有沒有留下我只顯示每次點擊立即下一行/兄弟？我會追加一個計數器，以每行類，但試圖選擇在jQuery的下一行與反

這時無法幫助是我這表明在點擊

<script> 
$(".myButton").click(function() { 
    $('.container .row').next('.row:hidden').slideDown(); 
}); 
</script> 

<div class="container"> 
    <!-- 1st row not hidden by default --> 
    <div class="row"> 
    <div class="row"> 
    <div class="row"> 
</div>

所有行提前感謝您的幫助！

來源

2015-10-06 Jibes

直視jQueries'的.index（）'和'.EQ（）'你可以用'的.index找到索引號（）'，您可以選擇特定的一行' .EQ（）'。你可能也想看看'.next（）' – ntgCleaner

包括一個小提琴（或其他演示） – vol7ron

$('.container .row:visible').last().next('.row:hidden').slideDown();

如果你正在做的是顯示在順序它們，那麼你就需要跟蹤哪些是有效的。您可以簡單地使用可見性來始終選擇最後一個。

所有你要做的就是添加:visible行選擇，找到所有可見行;然後使用last()方法僅引用該堆棧的最後一個。這允許僅爲一個元素（最後一個）調用next()，而不是容器中的所有行。

爲了簡化甚至更多（並調用方法較少），你可以選擇只選擇第一個隱藏的行：$('.container .row:hidden:first').slideDown();或$('.container .row:hidden').first().slideDown();

Fiddle

來源

2015-10-06 20:42:03 vol7ron

謝謝！這正是我需要的！ – Jibes

你可以嘗試通過收集迭代，以顯示正確的。看到這個的jsfiddle：http://jsfiddle.net/gjqb6m83/

var i = 0; 
var collection = $(".row"); 

$(".myButton").click(function() {  
    $(collection).css('display', 'none'); 
    $(collection[i]).slideDown(); 
    i++ 
    i = i % collection.length; 
});

來源

2015-10-06 20:30:31

可以使用:nth-child()

$(document).ready(function() { 
 
    var counter = 1; 
 
    $(".myButton").click(function() { 
 
     counter++; 
 
     $('.container .row').hide(); 
 
     $('.container .row:nth-child(' + counter + ')').slideDown(); 
 
    }); 
 
});

.row { 
 
    display:none; 
 
} 
 
.row:nth-child(1) { 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="myButton">My Button</button> 
 
<div class="container"> 
 
    <div class="row">row 1</div> 
 
    <div class="row">row 2</div> 
 
    <div class="row">row 3</div> 
 
    <div class="row">row 4</div> 
 
    <div class="row">row 5</div> 
 
</div>

來源

2015-10-06 20:32:34 indubitablee

如果「選擇」之類添加到第一行比你可以這樣做：

<script> 
    $(".myButton").click(function() { 
    $('.container .row.selected') 
     .removeClass('selected') 
     .hide() 
     .next() 
     .addClass('selected') 
     .slideDown(); 
); 
</script> 

<div class="container"> 
    <div class="row selected"> 
    <div class="row"> 
    <div class="row"> 
</div>

來源

2015-10-06 20:41:55 Loque

如果你需要知道活動幻燈片，我會贊成這一點。可能有多個可見（如三個幻燈片），但要突出顯示所選/活動的一個。對於這樣的事情，隱藏/可視性可能不夠。 – vol7ron

用另外一個jQuery的僞選擇:first的

$(".myButton").click(function() { 
    $('.container .row:hidden:first').slideDown() 
});

和不要忘記關閉的div！看看https://jsfiddle.net/kswmktce/1/

來源

2015-10-06 20:42:21

又一解決方案。這個一次只顯示一個，並在完成時重新開始。

$(".myButton").click(function() { 
 
    $(".row:visible").next().slideDown(); 
 
    $(".row:visible").first().hide(); 
 

 
    if (!$(".row:visible").length) 
 
    $(".row").first().slideDown(); 
 
});

.row { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<button class="myButton">Click ME</button> 
 

 
<div class="container"> 
 
    <div class="row">a</div> 
 
    <div class="row">b</div> 
 
    <div class="row">c</div> 
 
    <div class="row">d</div> 
 
    <div class="row">e</div> 
 
</div>

來源

2015-10-06 20:48:46

jQuery的顯示一個下一個兄弟在上點擊

回答

Fiddle

相關問題