jQuery的下一個（）無法正常運行

Question

我有一組我通過每3秒想週期有關的圖像，但只顯示一次一個：

# some django template code: 
<div id="featured-prints" class="featured-promo"> 
    {% for p in promo_prints %} 
    <a href="{% url 'print_order_with' p.id %}"> 
     <img class="featured-print" src="{{ MEDIA_URL }}{{ p.id }}_{{ THUMBNAIL_SIZE }}.png" alt="{{ p.body }}" /> 
    </a> 
    {% endfor %} 
</div> 

# the JS to cycle through: 

$(function(){ 
    $('.featured-promo a:gt(0)').hide(); 
    setInterval(function(){ 
     $('.featured-promo :first-child') 
     .hide() 
     .next('a') 
     .fadeIn(2000) 
     .end() 
     .appendTo('.featured-promo'); 
}, 1000); 

我最近添加的<a>各地img，現在Javascript不起作用;它不會fadeIn()下一個鏈接的圖像。我已經嘗試了幾種變化，包括將「a」傳遞給next()和「img」，但似乎沒有任何效果。我也嘗試鏈接parent()到hide()函數，仍然沒有骰子。

任何提示？

Answer 1

嘗試改變

$('.featured-promo :first-child') 

到：

$('.featured-promo > :first-child') 

沒有>它下降到每一個層次。所以它找到.featured-promo（第一個a）的第一個孩子，並且每個a（每img）的第一個孩子。它隱藏了所有這些，然後在接下來的a中褪色。 img標籤保持隱藏狀態，因爲沒有任何東西會使他們淡入。

>在選擇器中意味着只將下一部分與直接子代進行匹配，而不是所有後代。

Answer 2

$(function(){ 
    $('.featured-promo a:gt(0)').hide(); 
    setInterval(function(){ 
    $('.featured-promo :first-child') 
    .hide() 
    .find('a') 
    .fadeIn(2000) 
    .end() 
    .appendTo('.featured-promo'); 
}, 1000); 

嘗試找到的，而不是未來

Answer 3

使用結束（）隱藏後（）：

$('.featured-promo :first-child') 
     .hide() 
     .end() 
     .next('a') 
     .fadeIn(2000) 
     .end() 
     .appendTo('.featured-promo'); 

Answer 4

試試這個：

$(function(){ 
    $('.featured-promo a:gt(0)').hide(); 
    setInterval(function(){ 
     $('.featured-promo').children('a .featured-print').eq(1).parent() 
     .hide() 
     .next('a') 
     .fadeIn(2000) 
     .end() 
     .appendTo('.featured-prints'); 
}, 1000); 

Answer 5

的錯誤是在那裏

$(function(){ 
    $('.featured-promo a:gt(0)').hide(); 
    setInterval(function(){ 
    $('.featured-promo :first-child')// here 
    .hide() 
    .next('a') 
    .fadeIn(2000) 
    .end() 
    .appendTo('.featured-promo');// no need to append as the for loop is already appending the anchors to the featured-promo. 
    }, 1000); 
)}; 

您所呼叫的.next('a')上.featured-promo第一胎是不是.featured-promo兄弟，但它的孩子。 elementA.next()用於獲取兄弟（的elementA即B元素後的元素）

要得到其他a S'你應該這樣寫

$(function(){ 
    var index = 0; 
    var total_a = $('.featured-promo a').length; 
    setInterval(function(){ 
    $('.featured-promo a:gt(' + index + ')') 
    .hide() 
    .next('a') 
    .fadeIn(2000); 
    index = (index < total_a) ? index + 1 : 0;// will increment if number of a is greater than index else 0 and continue like a slider.. 
    }, 2000);// better use 2000 ms as you're using 2000ms in the `fadeIn()` 
});