Question

寻找jQuery忍者的帮助。我的jQuery下面有效，但我强烈怀疑我如何选择这些元素可以大大改进。如何最好地选择这些元素？我的代码可以改进吗？（见下面的目的，重要的是要注意我只想选择第一个div类结果和图像）

<div id="priceInventory">
<div class="Hdr">Some Unique Header</div>

<div class="results"> 
    <div onclick="showInfo('#RandomId');" class="xx yy"><img class="arrow" src="/images/arrow-up.png"> Title</div> 
        <div style="display: none;" id="RandomId">Unique Content</div>                                                                                                          
</div>

<div class="results"> 
    <div onclick="showInfo('#RandomId');" class="xx yy"><img class="arrow" src="/images/arrow-up.png"> Title</div> 
        <div style="display: none;" id="RandomId">Unique Content</div>                                                                                                          
</div>

<div class="results"> 
    <div onclick="showInfo('#RandomId');" class="xx yy"><img class="arrow" src="/images/arrow-up.png"> Title</div> 
        <div style="display: none;" id="RandomId">Unique Content</div>                                                                                                          
</div>
<!-- results repeats -->

<script>
$("body div#priceInventory div:nth-child(2) div:nth-child(2)").show();
$("body div#priceInventory div:nth-child(2) div:nth-child(1) img").attr('src','/images/arrow-dwn.png');
</script>

代码的一般用途是在页面加载时仅显示第一组内容的内容。箭头也会更新，以指示正在显示此内容。

非常感谢，我衷心感谢stackoverflow的朋友们。我希望其他人也觉得这很有帮助。

Answer 1

从它的外观来看，这应该更优雅一点。只是选择减少，但我认为这是你正在寻找的。这将做与上面相同的事情，除非你有使用.results和.arrow类的继承人之外的其他元素。

$(".results:first div:hidden").show();
$(".results:first .arrow").attr('src','/images/arrow-dwn.png');

Answer 2

我个人更喜欢：

<script>
$("#priceInventory .results div div.someclass").show();
$("#priceInventory .results div img.arrow").attr('src','/images/arrow-dwn.png');
</script>

Someclass是您添加到第二个嵌套div的类。我个人不喜欢使用nth-child，因为它在我更改顺序/布局时会中断。

选择jQuery - 选择特定的div和图像

2 个答案: