选择这个和这个里面的div答案

【问题标题】：select this and div inside of this选择这个和这个里面的div
【发布时间】：2014-10-12 19:11:12
【问题描述】：

我有两个这样的 div：

<div class="square">

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

</div>

点击方形 div 我想制作动画：

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


    });

我的意思是我想同时制作动画：this 和 div 在里面。我不想选择带有类或 id 的第二个 div。我也试过 function(){($(this), $(this).find('div').animate 但是没用。

有什么建议吗？

【问题讨论】：

【解决方案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);
});

【讨论】：

【解决方案2】：

试试这个

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

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

});

【讨论】：

【解决方案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);
});

【讨论】：