Question

我正在尝试单击无序列表中第三项中包含的div。所以使用HTML（见下图）我试图点击div：

<li>
    <div class="rg-ss-thumb ">
        <img style="max-width: 100%;height: auto;" src="/media/rokgallery/8/810b28b9-29e6-4e39-a104-510446431cdd/8756c0ae-84a2-464f-e15e-31bac0fc60ab-thumb.jpg" alt="Giffin Design - Black Limelight" title="Giffin Design - Black Limelight">
    </div>
</li>

jQuery选择器执行此操作我正在尝试：

jQuery("#rg-ss-thumb-list :nth-child(3) > .rg-ss-thumb").click()

但我似乎没有选择第3个LI，因此也没有选择DIV。有人可以指点我在正确的方向吗？

<ul class="rg-ss-thumb-list" style="width: 1356px;">
   <li>
      <div class="rg-ss-thumb ">
         <img style="max-width: 100%;height: auto;" src="/media/rokgallery/0/01c10df8-340e-4e15-bd6a-16e0eacd2edf/1c36b218-cae0-4f57-8b9b-74abb6a96850-thumb.jpg" alt="Cintemani Dan" title="Cintemani Dan">
      </div>
   </li>
   <li>
      <div class="rg-ss-thumb">
         <img style="max-width: 100%;height: auto;" src="/media/rokgallery/7/7b6ae878-30e0-443f-d5dc-510507b5cbbe/2507b8be-8b5e-473b-c06f-9fc9d3f26b8c-thumb.jpg" alt="Daniel Giffin Kurvi" title="Daniel Giffin Kurvi">
      </div>
   </li>
   <li>
      <div class="rg-ss-thumb ">
         <img style="max-width: 100%;height: auto;" src="/media/rokgallery/8/810b28b9-29e6-4e39-a104-510446431cdd/8756c0ae-84a2-464f-e15e-31bac0fc60ab-thumb.jpg" alt="Giffin Design - Black Limelight" title="Giffin Design - Black Limelight">
      </div>
   </li>
   <li>
      <div class="rg-ss-thumb ">
         <img style="max-width: 100%;height: auto;" src="/media/rokgallery/a/a6800e34-10e9-4ac0-9937-9125172c668b/0c953b22-a69f-46cc-a934-e140fdc01511-thumb.jpg" alt="Giffin Design - Black Limelight 2" title="Giffin Design - Black Limelight 2">
      </div>
   </li>
   <li>
      <div class="rg-ss-thumb ">
         <img style="max-width: 100%;height: auto;" src="/media/rokgallery/9/9fd74ab2-4f23-4e10-af80-1dc13ce17b9d/39b63b87-d4f4-4a1a-be34-8a197307361a-thumb.jpg" alt="Giffin Design - Cintemani - Copper" title="Giffin Design - Cintemani - Copper">
      </div>
   </li>
   <li>
      <div class="rg-ss-thumb active">
         <img style="max-width: 100%;height: auto;" src="/media/rokgallery/5/5ff4fe7d-c462-4a9e-82ee-a65bba3d24e4/39d4f2dd-767e-4ea7-b4de-d3c29c6101a6-thumb.jpg" alt="Giffin Design - Cintemani - Hawthorn" title="Giffin Design - Cintemani - Hawthorn">
      </div>
   </li>
</ul>

和

Answer 1

首先，当您尝试提取#rg-ss-thumb-list时，id的jQuery选择器不正确，而rg-ss-thumb-list实际上是class。

其次，您对nth-child的使用不正确。您需要在nth-child上使用list items。这个选择器可以工作：

$(".rg-ss-thumb-list li:nth-child(3) .rg-ss-thumb");

提供一个快速工作的例子：

$(".rg-ss-thumb-list li:nth-child(3) .rg-ss-thumb").css('background-color', 'blue');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="rg-ss-thumb-list" style="width: 1356px;">
    <li>
        <div class="rg-ss-thumb ">
            <img style="max-width: 100%;height: auto;" src="/media/rokgallery/0/01c10df8-340e-4e15-bd6a-16e0eacd2edf/1c36b218-cae0-4f57-8b9b-74abb6a96850-thumb.jpg" alt="Cintemani Dan" title="Cintemani Dan"/>
        </div>
    </li>
    <li>
        <div class="rg-ss-thumb">
            <img style="max-width: 100%;height: auto;" src="/media/rokgallery/7/7b6ae878-30e0-443f-d5dc-510507b5cbbe/2507b8be-8b5e-473b-c06f-9fc9d3f26b8c-thumb.jpg" alt="Daniel Giffin Kurvi" title="Daniel Giffin Kurvi"/>
        </div>
    </li>
    <li>
        <div class="rg-ss-thumb ">
            <img style="max-width: 100%;height: auto;" src="/media/rokgallery/8/810b28b9-29e6-4e39-a104-510446431cdd/8756c0ae-84a2-464f-e15e-31bac0fc60ab-thumb.jpg" alt="Giffin Design - Black Limelight" title="Giffin Design - Black Limelight"/>
        </div>
    </li>
    <li>
        <div class="rg-ss-thumb ">
            <img style="max-width: 100%;height: auto;" src="/media/rokgallery/a/a6800e34-10e9-4ac0-9937-9125172c668b/0c953b22-a69f-46cc-a934-e140fdc01511-thumb.jpg" alt="Giffin Design - Black Limelight 2" title="Giffin Design - Black Limelight 2"/>
        </div>
    </li>
    <li>
        <div class="rg-ss-thumb ">
            <img style="max-width: 100%;height: auto;" src="/media/rokgallery/9/9fd74ab2-4f23-4e10-af80-1dc13ce17b9d/39b63b87-d4f4-4a1a-be34-8a197307361a-thumb.jpg" alt="Giffin Design - Cintemani - Copper" title="Giffin Design - Cintemani - Copper"/>
        </div>
    </li>
    <li>
        <div class="rg-ss-thumb active">
            <img style="max-width: 100%;height: auto;" src="/media/rokgallery/5/5ff4fe7d-c462-4a9e-82ee-a65bba3d24e4/39d4f2dd-767e-4ea7-b4de-d3c29c6101a6-thumb.jpg" alt="Giffin Design - Cintemani - Hawthorn" title="Giffin Design - Cintemani - Hawthorn"/>
        </div>
    </li>
</ul>

在无序列表的第n个元素中选择一个div

1 个答案: