jQuery next() 没有按预期工作

Posted 2023-02-25

【中文标题】jQuery next() 没有按预期工作

【英文标题】：jQuery next() not working as expected

【发布时间】：2014-07-15 07:04:27

【问题描述】：

我有一组链接图像，我想每 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"  />
    </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);

我最近在 img 周围添加了<a>，现在 javascript 无法运行；它不是fadeIn() 下一个链接图像。我尝试了几种变体，包括将“a”传递给next() 和“a img”，但似乎没有任何效果。我还尝试将parent() 链接到hide() 函数，仍然没有骰子。

有什么建议吗？

【问题讨论】：

fadeIn(2000) - 2000ms 和 1000ms 的间隔。那永远行不通！

出于好奇，您为什么一遍又一遍地向.featured-promo 添加内容？为什么在淡入完成之前再次运行间隔..？你知道你在做什么，或者你只是在随机查询函数..？

@TilwinJoy 他似乎在做的是淡入第二个元素，然后将第一个元素移动到最后，因此第二个元素成为第一个元素。这将继续旋转轮播。

@Barmar wah.. 没注意到它……谢谢

【参考方案1】：

尝试改变

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

到：

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

没有>，它会下降到每个级别。所以它找到.featured-promo 的第一个孩子（第一个a），以及每个a 的第一个孩子（每个img）。它隐藏了所有这些，然后只在下一个a 中消失。 img 标签保持隐藏状态，因为它们永远不会淡入。

选择器中的> 表示仅将下一部分与直接子代进行匹配，而不是所有后代。

【讨论】：

恐怕这不能解决问题；没有任何图像显示静止。我尝试将“img”和“a”放在 next() 调用中，但无济于事。

你能做一个jsfiddle吗？

@ThePiedPipes 这是sort the issue 据我所见..？我无法解决仍然看到这篇文章的问题，我是投票的人……问题可能是您代码中的其他问题..？

@Tilwin Joy 你试过用<img>s 而不是 div 做你的小提琴吗？

@ThePiedPipes 与其制作小提琴来证明它有效，不如你制作一个小提琴来证明它不起作用。然后我们可以告诉你哪里出错了。

【参考方案2】：

错误就在那里

$(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);
);

您正在调用.featured-promo 上的.next('a') first-child，它不是.featured-promo 的兄弟，但它是孩子。 elementA.next()用于获取兄弟元素（元素A之后的元素即元素B）

要获得另一个as'，你应该这样写

$(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()`
 );

【讨论】：

啊，我的错。感谢您的通知。

我不明白你的意思。他不想要.featured-promo 的兄弟姐妹，他想要第二个孩子。

他所做的是$('.featured-promo :first-child').next('a') ，它给出了.featured-promo 的下一个锚元素（一个锚元素，它是.featured-promo 的兄弟）。但他想要的是在.featured-promo中获取当前锚点的下一个锚点元素。

他总是想得到第二个锚元素。 appendTo() 将第一个锚点移动到列表的末尾，因此第二个锚点在淡入时成为第一个锚点。

嗯，好的，但是他不会通过$('.featured-promo :first-child').next('a'); 获得所需的锚点，因为他没有在.featured-promo 中遍历以获得锚点。

【参考方案3】：

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

尝试查找而不是下一个

【参考方案4】：

在hide()之后使用end()：

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

【参考方案5】：

试试这个：

$(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);

【讨论】：

.featured-print 不是 .featured-promo 的子代，而是孙代。

@Barmar 抱歉，已修复！