javascript - 包含具有指定属性值的子元素的列表项的选择器

Question

我正在尝试根据 <a> 中的特定 href 值显示列表中的特定项目标签。

 <ul id="images">
    <li class="other-image" style="display: none;">
        <a target="_blank" href="http://www.example.com/page.html">
            <img src="http://www.test.com/home/pic.jpg">
        </a>
    </li>
    <li class="other-image" style="display: none;">
        <a target="_blank" href="http://www.exmaple.com/index.html">
            <img src="http://www.example-image.com/image.jpg">
        </a>
    </li>
    <li class="other-image" style="display: none;">
        <a target="_blank" href="http://www.example1.com/test">
            <img src="http://www.example-image1.com/image1.jpg">
        </a>
    </li>
</ul>

$(document).ready(function () {
    $("#images").find("li").fadeIn().delay(10000).fadeOut();
});

例如，我想显示 href="http://www.exmaple.com/index.html" 的项目.我不想改用索引，因为随着更多项目从列表中添加/删除，该项目可能具有不同的索引。我已经尝试用几种不同的方式(如下)编写选择器，以仅选择具有此特定 href 值的列表项，但没有成功。

尝试 #1:

$("#images").find("li").filter($("a[href='http://www.exmaple.com/index.html']")).fadeIn().delay(10000).fadeOut();

尝试#2:

$("#CCCImages").find($("a[href='http://www.exmaple.com/index.html']")).fadeIn().delay(10000).fadeOut();

尝试 #3:

$("#CCCImages").children($("a[href='http://www.exmaple.com/index.html']")).fadeIn().delay(10000).fadeOut();

如有任何建议，我们将不胜感激。

Answer 1

尝试 1 失败，因为您正在 lis 列表中寻找 anchor 标记。它不是在看 child 。

尝试 2 失败，因为你没有褪色 li

尝试3，anchor不是 child 。

有很多方法可以做到这一点。

一个是

$("a[href='http://www.exmaple.com/index.html']").closest("li").fadeIn();