Question

如下所示$(nextDiv + ' > div').eq(i).fadeIn('slow');不起作用，因为它似乎格格不入。 nextDiv正在检查锚点下方的div，如何获得坐在其中的两个div？

HTML：

<a href="#" id="btn2" onclick="subClick(this)">Sub Click</a>
<div>
    <div>I want this to fade in on the click</div>
    <div>Followed by this etc.</div>
</div>

使用Javascript：

function subClick(myAnchor)
{
    var nextDiv = $(myAnchor).next();
    function showDiv(i) {
        if (i > 2) return;
        setTimeout(function () {
            $(nextDiv + ' > div').eq(i).fadeIn('slow');
            showDiv(++i);
        }, 50);
    }
    showDiv(0);
}

Answer 1

您正在尝试将字符串与jQuery连接起来，但它不能提供有效的选择器。连接将提供类似"[object Object] > div"的内容，它不会选择代码中的任何元素。

相反，请在jQuery div对象上使用children()方法获取nextDiv个孩子。

nextDiv.children('div').eq(i).fadeIn('slow');

如果只有两个div，则可以使用delay()方法减少代码。

＆＃13;

function subClick(myAnchor) {
  var nextDivs = $(myAnchor).next().children();
  // if you want to do the animation after the first then
  // use the below code, where second animation initializing within 
  // the first animation success callback, which also provides a 50ms          
  // delay for second animation(avoid .delay(50) if you dont nedd that delay)
  
  //  nextDivs.eq(0).fadeIn('slow', function() {
  //    nextDivs.eq(1).delay(50).fadeIn('slow');
  //  });

  
  // in case you just want to provide a 50ms delay
  // between animation then use, your code does this
  nextDivs.eq(0).fadeIn('slow');
  nextDivs.eq(1).delay(50).fadeIn('slow');
}

＆＃13;

Answer 2

var nextDiv = $(myAnchor).next();然后nextDiv是一个对象而不是选择器。如果您想访问其div个孩子，请使用：

nextDiv.children('div').eq(i).fadeIn('slow');

使用锚点下一个元素获取现有div的子div而不使用ID或使用JQuery的类

2 个答案: