jQuery关联数组

Question

需要一些帮助，我确定这是相当简单的jQuery

我有以下重复标记（几个列表项）

<li>
<div class="answer">
<p><select class="dropdown">
..options..
</select></p>
</div>
<div class="commentBox">
..content..
</div>
</li>

根据页面加载时所选选项的值，将显示/隐藏“ commentBox”。

我已经尝试了以下jQuery

var dd = $('.dropdown');
var com = $('.commentBox');


dd.each(dd, function(n, val){
if($(this).val() == 'whatever'){
   com[n].setStyle('display', 'none');
}
});

我收到一个错误“ b.apply不是函数”

因此，在我看来，它应该如何工作-如果它是第一个选择下拉列表，请显示/隐藏第一个“ commentBox” div。 如果是第二个下拉菜单，则显示/隐藏第二个“ commentBox” div。 等等。

我认为尝试各种jquery技术时一团糟，所以我确定这里有数十种可能性。 谢谢

Answer 1

您的问题是您要向each传递额外的（第一个）参数。
each在静态调用时仅将集合作为第一个参数。
换一种说法：

$.each(dd, function() { ... });

要么

dd.each(function() { ... });

---

请注意，您可以将代码更改为

$(this).closest('li').find('.commentBox').hide();

Answer 2

当这样调用.each() ，只给它一个参数，即function 。

dd.each(function(n, val){
    if($(this).val() == 'whatever'){
       com[n].setStyle('display', 'none');
    }
});

或者，如果您调用jQuery.each则可以传递2个参数， 如下所示 ：

$.each(dd, function(n, val){
    if($(this).val() == 'whatever'){
       com[n].setStyle('display', 'none');
    }
});

第二个版本用于迭代任何类型的集合。

您正在将两者结合在一起。

---

编辑：我想我最好解释一下setStyle在OP的代码中，而不是手头问题的直接原因。

我无法知道OP是否使用其他方法扩展了DOM元素。 因此，我只能假设这种方法的位置是正确的。

Answer 3

尝试

var dd = $('.dropdown'),
    com = $('.commentBox');

dd.each(function(n, ele) {
    if( $(ele).val() == 'one') {
        com.eq(n).css('display', 'none');
    }
});

使用.eq(n)代替[n] ，后者将产生DOM节点，而我的产生一个jQuery对象，可以在其上调用css() （如您所见，我从setStyle切换到了css() ，该函数是什么） 。

---

使用Slakks建议的增强功能，您将获得这段可读性更好的代码

$('.dropdown').each(function(n, ele){
    var $ele = $(ele);
    if ($ele.val() == "one")
        $ele.closest('li').find('.commentBox').hide();
});