选择这个和里面的div

Question

我有两个这样的div：

<div class="square">

    <div class="head">
      <span>material</span>
    </div>

</div>

点击方形div我想要动画：

$('.square').click(function(){
    $(this), $(this).find('div').animate({
        width: "700px"
    }, 1500);


    });

我的意思是我想要同时制作动画：这和div内部。我不希望选择带有class或id的第二个div。我也试过function（）{（$（this），$（this）.find（＆＃39; div＆＃39;）。 但它没用。

有什么建议吗？

Answer 1

使用add组合匹配：

$('.square').click(function(){
    $(this).add($(this).find('div')).animate({
        width: "700px"
    }, 1500);
});

在幕后，jQuery对象只是数组。这会将匹配的查找结果添加到this元素，然后将动画应用于两者。

您还可以使用addBack()重新包含以前的jQuery上下文（遍历堆栈中的前一个值）：http://api.jquery.com/addback/

$('.square').click(function(){
    $(this).find('div').addBack().animate({
        width: "700px"
    }, 1500);
});

Answer 2

试试这个

$('.square').click(function(){

$(this).children('div').animate({
    width: "700px"
}, 1500);

});

Answer 3

不要尝试选择两个不同的元素并为它们设置动画，而是尝试为所有想要为同一个类名设置动画的元素，然后.find()设置该动画。

所以，你的HTML将是：

<div class="square animate-me">

    <div class="head animate-me">
      <span>material</span>
    </div>

</div>

你的jQuery将是：

$('.square').click(function(){
    $(this).find('.animate-me').animate({
        width: '700px'
    }, 1500);
});