Bug Tracker

Opened 13 years ago

Closed 13 years ago

Last modified 11 years ago

#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:
Blocked by: Blocking:

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 (8)

comment:1 Changed 13 years ago by anonymous

Demonstration in jsFiddle:

http://jsfiddle.net/6WxAZ/

comment:2 Changed 13 years ago by Rick Waldron

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:

http://jsfiddle.net/6WxAZ/2/

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 13 years ago by Rick Waldron

Component: unfiledtraversing
Priority: undecidedlow

comment:4 Changed 13 years ago by Rick Waldron

Resolution: invalid
Status: newclosed

comment:5 Changed 13 years ago by dmethvin

Keywords: needsreview removed

comment:6 Changed 12 years 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'));

comment:7 in reply to:  6 ; Changed 11 years ago by Indamix

you can use

.prevAll(':visible:first')

and

.nextAll(':visible:first')

comment:8 in reply to:  7 Changed 11 years ago by anonymous

Replying to Indamix:

you can use

.prevAll(':visible:first')

and

.nextAll(':visible:first')

it works..

Note: See TracTickets for help on using tickets.