选择几个元素 jQuery

Posted

技术标签:

【中文标题】选择几个元素 jQuery【英文标题】:Select several elements jQuery 【发布时间】:2012-08-08 05:24:45 【问题描述】:

我对 jQuery 很陌生,所以如果这听起来很愚蠢,请不要跳过我。我想知道是否有一种方法可以选择其中的“#ammountbest2”、“input”和“textarea”,以便我可以使用一个选择器一次隐藏和清除其中的值,所以我不必须拼出每一个。像兄弟姐妹或父母之类的东西。这样我就可以在最后附上:“.val('').css('display', none')”

$('#ammountbest').change(function () 
var ammountbest = ""

$('#ammountbest option:selected').each(function () 
    ammountbest += $(this).text() + "";);


if(ammountbest == "0") $('#ammountbest1,#ammountbest2').css('display', 'none');   
if(ammountbest == "1") 
    $('#ammountbest1').css('display', 'block');
    $('#ammountbest2 input,#ammountbest2 textarea').val('');
    $('#ammountbest2').css('display', 'none');
    
if(ammountbest == "2") 
    $('#ammountbest1,#ammountbest2').css('display', 'block');
    
)
.trigger('change');



<select id="ammountbest">
    <option>0</option>
    <option>1</option>
    <option>2</option>
</select>

<!-- 1 Winners -->
<div id="ammountbest1" style="display:none;">
<label for="besttitle1" title="Title">Title 01:</label><br>
<input name="besttitle1" id="besttitle1" size="30" type="input">
<label for="bestschool1" title="School">School 01:</label><br>
<input name="bestschool1" id="bestschool1" size="30" type="input">
<label for="bestvideo1" title="Video">Video Embed Code 01:</label><br>
<textarea name="bestvideo1" id="bestvideo1" cols="30" rows="5"></textarea>
</div>

<!-- 2 Winners -->
<div id="ammountbest2" style="display:none;">
<label for="besttitle2" title="Title">Title 02:</label><br>
<input name="besttitle2" id="besttitle2" size="30" type="input">
<label for="bestschool2" title="School">School 02:</label><br>
<input name="bestschool2" id="bestschool2" size="30" type="input">
<label for="bestvideo2" title="Video">Video Embed Code 02:</label><br>
<textarea name="bestvideo2" id="bestvideo2" cols="30" rows="5"></textarea>
</div>

【问题讨论】:

你想要#amountbest2元素以及inputtextarea吗? 是的,我想一次选择 div 中的所有元素。 【参考方案1】:

最简单的方法是在一个 jQuery 对象中指定两个对象:

$('#ammountbest2 input, #ammountbest2 textarea')

当然,您也可以使用:

$('#ammountbest2').children()

已编辑以回应 OP 的评论:

我不想要第一个选项的原因是代码变得很大,因为我有 7 个像这样填充输入和 txtarea 的 div,所有这些都必须立即隐藏和清除。

要根据上面发布的 html 选择多个元素,假设格式保持可预测且一致,我建议:

$('div[id^=ammountbest]').children('input, textarea').val('').andSelf().hide()

(根据 OP 的原始问题,故意拼错单词 ammount(原文如此)。)

参考资料:

attribute-starts-with-value [attribute^="value"] selector。 children().

【讨论】:

我不想要第一个选项的原因是代码变得很大,因为我有 7 个像这样填充输入和 txtarea 的 div,所有这些都必须立即隐藏和清除。跨度> 检查编辑。我认为最后发布的建议应该更符合您的需求。 儿童不是更像#ammountbest2>输入吗? .find() 似乎是更好的选择? 那么最后一个建议就是这样做的。 是的,似乎不起作用。我这样做了: if(ammountbest == "1") $('div[id^=amountbest]').children('input, textarea').val('').andSelf().css('display ', '没有'); $('#ammountbest1').css('display', 'block'); 【参考方案2】:

使用类。

<div id="ammountbest1" class="amountbest" style="display:none;">
<div id="ammountbest2" class="amountbest" style="display:none;">

并像这样使用 jquery 选择器

$('.amountbest');

祝你好运!

【讨论】:

【参考方案3】:

是的,您可以通过逗号分隔多个选择器。试试这个:

$("#ammountbest1,#ammountbest1 input,#ammountbest1 textarea")

【讨论】:

【参考方案4】:

您可以使用, 分隔选择器。这将分别运行每个选择器并将所有结果收集到 jQuery 对象中。我可以看到你已经这样做了,但你有一个可能导致问题的尾随逗号:

$('#ammountbest2 input,#ammountbest2 textarea,').val('');
                                             ^ there

您还遗漏了一个单引号,以及另一个尾随逗号。

$('#ammountbest2,).css('display', 'none');
                ^ here

【讨论】:

昏迷只是从剪切和粘贴到问题。不是手头的问题。

以上是关于选择几个元素 jQuery的主要内容,如果未能解决你的问题,请参考以下文章

jQuery判断当前元素是第几个元素&获取第N个元素

jquery选择器查找子元素

jquery如何获取第一个或最后一个子元素

jQuery选择器选择元素的方法完整篇

02jQuery选择器

用于查找子元素的jquery选择器