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列表中查找锚标记。它不是在看孩子们。

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

尝试3，锚不是孩子。

有很多方法可以做到。

一个是

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

Answer 2

使用jQuery选择器时，特别是在调用[DOM遍历]方法之后，在调用jQuery对象上的方法时必须注意当前匹配的集合。例如，要打破你的第一次尝试，

$("#images")   // Targeted set is only the <ul>
  .find("li")  // Only the 3 <li> elements
  .filter($("a[href='http://www.exmaple.com/index.html']")) // matches nothing.
  .fadeIn()
  .delay(10000)
  .fadeOut();

filter检查每个<li>并检查它是否也是<a>，因此它们都会失败并被排除在外。正如文档所指出的那样：

针对每个元素测试提供的选择器;匹配选择器的所有元素都将包含在结果中。

调整上述内容，我们可以轻松纠正过滤器，使其更加有效。首先，定位所需的<li>：$("#images li")

然后使用has过滤结果，将结果集限制为具有符合条件的锚链接的结果：.has("a[href='http://www.exmaple.com/index.html']")

最后，你的褪色。

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

当然，如果您有点好奇，也可以通过有用的方式利用filter方法来实现这一目标。该方法的重载变体接受用于过滤的函数。在这种情况下，下面的用法在功能上等同于使用has，但更详细。

$("#images li").filter(function() {
    return $(this)
             .find("a[href='http://www.exmaple.com/index.html']")
             .length > 0;
})
.fadeIn(); // etc.

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

2 个答案: