Ticket #7290 (closed bug: invalid)
.next() doesn't work with :visible
| Reported by: | gg_designer@… | Owned by: | |
|---|---|---|---|
| Priority: | low | Milestone: | 1.5 |
| Component: | traversing | Version: | 1.4.3 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
If we try to do this:
$('li.selected').next('li:visible');
We get no results at all. Probably same for the others (.nextAll(), .nextUntil(), .prev(), .prevAll(), .prevUntil(), etc.)
Test Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Jquery Visible</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('li:first').addClass('selected');
$('a').click(function(){
var action = $(this).attr('href');
if(action == '#next') {
$('.selected').removeClass('selected').next('li:visible').addClass('selected');
}
if(action == '#prev') {
$('.selected').removeClass('selected').prev(':visible').addClass('selected');
}
});
});
// style="display:none"
</script>
<style type="text/css">
.selected {font-weight:bold;}
</style>
</head>
<body>
<ul>
<li>Item 01</li>
<li style="display:none">Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
</ul>
<a href="#prev">« Previous</a> | <a href="#next">Next »</a>
</body>
</html>
Change History
comment:2 Changed 3 years ago by rwaldron
- Keywords needsreview added
The approach you're using is for only the next item, and if that item doesnt match the selector, then no item can be returned. You'll need to use nextAll or prevAll to collect all the possible elements to be filtered with your selector.
Take a look at this edit to your jsfiddle:
You'll see that I've acheived the desired behavior by getting all, filtering and specifying which element to move to (with eq()) in the matched set.
comment:3 Changed 3 years ago by rwaldron
- Priority changed from undecided to low
- Component changed from unfiled to traversing
comment:4 Changed 3 years ago by rwaldron
- Status changed from new to closed
- Resolution set to invalid
comment:6 follow-up: ↓ 7 Changed 16 months ago by totalknowledge@…
If anyone needs to find a solution to the OP's dilemma, you can use a simple do while loop till you find the next visible element.
temp_pointer = jQuery('#current_element'); do {
temp_pointer = temp_pointer.prev();
} while (temp_pointer.is(':hidden'));
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
Demonstration in jsFiddle:
http://jsfiddle.net/6WxAZ/