这个父母的孩子没有工作

Question

为什么这不起作用？

HTML

<div class="gallery">
    <div class="viewport">
    <div class="wrapper">
        <img src="img/boat1.png" />
        <img src="img/boat2.png" />
    </div>
    </div>
    <a href="#" class="btn_prev">prev</a>
    <a href="#" class="btn_next">next</a>
</div>

CSS

.viewport {position: relative; height: 220px; width: 280px; overflow: hidden; }
.wrapper  {position: absolute; height: 220px; width: 9999px;}

jQuery - 这个位工作正常

$(".wrapper").stop().animate({left: '-312px'}, 500);

jQuery - 但如果我添加parent.children它就会死掉

$(".btn_next").click(function(event){
    event.preventDefault(); 
    $(this).parent().children(".wrapper").stop().animate({left: '-312px'}, 500);
});

Answer 1

因为.wrapper嵌套了一层，所以它不是孩子。

改为使用.find()。

$(this).parent().find(".wrapper")

---

正确缩进HTML使其更清晰......

<div class="gallery">
    <div class="viewport">
        <div class="wrapper">
            <img src="img/boat1.png" />
            <img src="img/boat2.png" />
        </div>
    </div>
    <a href="#" class="btn_prev">prev</a>
    <a href="#" class="btn_next">next</a>
</div>