使用jQuery的each函数

Question

在一个文档中，我有大约25个DIV包含着不同名字的表单。这些DIV都有相同的类名，并且看起来像这样：

<div class="swoop" style="display:none">
  <form name="myFormXYZ" method="post">
    <input name="caption" type="hidden" value="19">
  </form>
</div>

我想编写jQuery代码，检查所有类名为“swoop”的DIV，如果任何一个DIV包含名为“caption”的输入字段，并且该字段的值为x，则这些DIV的显示属性应设置为“block”。 x是1到1000之间的整数。

到目前为止，我想出了以下代码：

$('.swoop').each(function() {
    var capt = $( ? ? ? ).attr('value()');
    if (capt == x) {$(this).css.(display','block')}
});

jQuery的函数能否遍历那些display属性被设置为none的DIV元素？

- Commata

---

具有 display: none 属性的元素不会被渲染，但仍然存在于 DOM 中。因此，是的，$('.swoop') 将选择所有类为 .swoop 的元素。 - Felix Kling

Answer 1

另一种方法：

$('.swoop').has('input[name=caption][value=' + x + ']').show();

这里使用属性选择器来查找具有特定值的输入元素，.has通过匹配传递的选择器与后代相符的元素来过滤元素，.show应该不难理解。

- Felix Kling

---

是的，抱歉，那是我的错...我的显示器让选择器之间看起来有一个空格。 - Jason M. Batchelor

已经有六个答案了！谢谢Felix、@Omar和@Musa！我明天才有时间来检查这些。 - Commata

感谢你们六位回答我的帖子。我在所有的六条评论中都写了感谢的话，但它们都消失了。 - Commata

这个完美地运作了，被选为最佳答案是因为它是最短的解决方案，并且教会了我一些关于过滤器的知识，这本书中没有提到。谢谢！ - Commata

Answer 2

你需要：

$('.swoop').each(function() {
    var capt = $('input[name=caption]', this).val();
    if (capt == x) {$(this).css.('display','block')}
});

- DiverseAndRemote.com

---

有趣的是，你回答中的代码看起来与Matt在上面的答案完全相同，但我的MSIE调试器对你的解决方案给出了不同的错误消息：“预期的标识符”。我知道，MSIE调试器通常没有多大用处...很抱歉我没有时间找出问题是否出在我的代码上。 - Commata

Answer 3

var someInt = 7;    
$('.swoop').each(function() {
    var capt = $('input[name=caption]', this).val());
    if (capt == someInt) {$(this).css('display','block');}
});

- Matt

---

谢谢，马特。我要等到明天才有时间尝试这些解决方案！ - Commata

我的MSIE调试器一直说“期望;”，但我找不到哪里缺少了一个。 - Commata

@user1781623，我找到了。它在“if”块中丢失了。感谢您的提醒。 - Matt

Answer 4

$('.swoop input[name="caption"]').each(function() {
    var capt = $(this).val();
    if (capt == x) {
        $(this).closest('.swoop').css('display','block')
    }
});

- Musa

---

input[caption] 不会选择任何元素。没有元素具有 caption 属性。 - Felix Kling

谢谢你的建议！这是我尝试过的唯一一个有效的方法，除了上面第一个，虽然很短，但我还是接受它作为答案。 - Commata

Answer 5

是的，jQuery可以访问即使它们被隐藏的元素。

在jQuery调用中使用当前项作为上下文来查找其中的元素。使用val方法获取输入的值，并且您需要解析该值以将字符串转换为数字：

var capt = parseInt($('input[name=caption]', this).val(), 10);
if (capt == x) { $(this).css('display','block'); }

- Guffa

Answer 6

var v = 19;    
$('.swoop input[name=caption]').each(function () {
            var capt = $(this).attr('value');
            if (capt == v) { 
            $(this).parents("div").andSelf().css('display', 'block');
            $(this).attr({ type: '' }); }
        });

- jmorc

---

尝试了一下，出现了错误信息“无法更改类型属性”。抱歉，由于上面的第一个答案对我有效，所以没有时间排除问题是否在我的代码中。 - Commata