Блог

Ищу помощи ниндзя 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. Я надеюсь, что другие тоже найдут это полезным.

С виду это должно быть немного более элегантно. Просто уменьшение выбора, но я думаю, что это то, что вы ищете. Это будет делать то же самое, что вы делаете выше, если только у вас нет других элементов за пределами этого наследника achy, которые используют классы .results и .arrow .

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

Я лично предпочел бы:

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

Someclass — это класс, который вы добавляете во второй вложенный div. Лично мне не нравится использовать nth-child, потому что он ломается, когда я меняю порядок / макет.