Question

我正在尝试实现手风琴。我在比较.each（）循环中的元素时遇到了问题。

我首先找到.accordion我需要扩展的.content。这是点击的.accordion .title元素的父元素（下面的第6行）。

然后我遍历页面上的每个.accordion。我尝试检测哪些.accordion是parent，以扩展他的.content。这不起作用。

// ACCORDION
var accordions = $('.accordion').toArray();

// Scroll down on click
$('.accordion .title').click(function() {
    var parent = $(this).parent();


    $(accordions).each(function() {

        // Show this accordion if it's the parent of the .title clicked
        // Problem is here ********
        if ( $(this) == parent )
            $(this).children('.content').slideDown();

        // Hide all accordions except this parent
        else {
            $(this).children('.content').slideUp();
        }

    });

});

我的主要问题比这个特定的例子宽一点：

如何循环浏览上述元素数组时是否$(this) == some_var_pointing_to_an_element？

编辑：我的手风琴html是否相关：

<div class=".accordion">
    <div class=".title">Hello</div>
    <div class=".content">World</div>
</div>

Answer 1

根本不需要循环。就这样做：

// hide the others
$(accordions).not(parent).children(".content").slideUp();

// show this one
parent.children(".content").slideDown();

Answer 2

JavaScript中的对象比较仅在两者都是相同的实例（即相同的内存位置）时才有效，但每次使用$()构造函数时，它都会创建一个新实例。

也就是说，你可以通过让jQuery为你做循环工作来简化代码：

// ACCORDION
var $accordions = $('.accordion');

// Scroll down on click
$accordions.find('.title').click(function() {
    var $parent = $(this).parent();

    $accordions
      .not($parent) // all but this one
      .children('.content');
      .slideUp();

    $parent.children('.content').slideDown();
});

比较.each（）上的元素

2 个答案: