Hiding and showing groups of elements

I have a page where all items of class 'div_title_item' are initially hidden. Base on some paginator logic I would then like to show some of them.

// initially
$(".div_title_item").hide(); // this works fine

Now the showing part. I tried below but it didn't work.

// on some event for example
var collection = $("开发者_JAVA技巧.div_title_item");
collection[0].show();
collection[1].show();
// etc...

Nothing is shown.

Live Demo

Make them jQuery objects by doing the following.

$(collection[0]).show();
$(collection[1]).show();

Otherwise they are just standard DOM elements and wont have access to jQuery methods.

Doing things like this:

collection[0]

Gives you the underlying DOM objects and they don't know what .show() means. An easy approach is to use eq to access the <div> you want:

var collection = $(".div_title_item");
collection.eq(0).show();
collection.eq(1).show();

You could also use filter and the :eq selector:

collection.filter(':eq(1)').show();