Geek Answers Handbook

Selector for a list item containing a child with a given attribute value

I am trying to display a specific item in a list based on the specific href value in the tag <a>.

 <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();
});

For example, I want to display the element where href="http://www.exmaple.com/index.html". I would not want to use an index instead, because this element may have a different index, as more and more elements are added / removed from the list. I tried to write a selector in several ways (below) to select a list item with this particular href value without success.

Attempt # 1:

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

Attempt number 2:

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

Attempt No. 3:

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

Any suggestions are welcome.

+4
source share
2 answers

1 , lis. .

2 , li

3, .

.

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

jQuery, [DOM traversal], 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> s: $("#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.
0

More articles:


All Articles