Skip to main content

Bug Tracker

Side navigation

#7290 closed bug (invalid)

Opened October 22, 2010 08:47PM UTC

Closed October 22, 2010 10:06PM UTC

Last modified February 27, 2013 06:16PM UTC

.next() doesn't work with :visible

Reported by: gg_designer@yahoo.com.br 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>

Attachments (0)
Change History (8)

Changed October 22, 2010 08:50PM UTC by anonymous comment:1

Demonstration in jsFiddle:

http://jsfiddle.net/6WxAZ/

Changed October 22, 2010 09:59PM UTC by rwaldron comment:2

keywords: → needsreview

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.

Changed October 22, 2010 10:05PM UTC by rwaldron comment:3

component: unfiledtraversing
priority: undecidedlow

Changed October 22, 2010 10:06PM UTC by rwaldron comment:4

resolution: → invalid
status: newclosed

Changed November 02, 2010 02:15AM UTC by dmethvin comment:5

keywords: needsreview

Changed February 02, 2012 08:22PM UTC by totalknowledge@yahoo.com comment:6

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'));

Changed January 02, 2013 12:19PM UTC by Indamix comment:7

you can use

.prevAll(':visible:first')

and

.nextAll(':visible:first')

Changed February 27, 2013 06:16PM UTC by anonymous comment:8

Replying to [comment:7 Indamix]:

you can use .prevAll(':visible:first') and .nextAll(':visible:first')

it works..