jQuery - Referencing psuedo/other class inside variable element

Question

Currently re-doing a script for a slider on my website and i've just stumbled upon something which i've wondered for a while - how do you say get the :first-child of var element if var element = $("ul").children("li") for example? Or in my case;

$(".slider").each(function() {
    var slider = $(this),
        nav = slider.children(".nav"),
        prev = nav.find(".prev"),     /* Trying to get other class from .nav */
        next = nav.find(".next");     /* Same as prev */
}

Am i working along the right lines here? It just cleans up code instead of occassionally having to re-reference .nav as a child of the slider.

EDIT

I'm referencing mine via data- attributes for prev and next, is there a way of doing;

nav.find("[data-nav='prev']");

Or won't that work?

Answer 1

OK I am assuming in your html

<div class="slider">
  <div class="nav next">NEXT</div>
  <div class="nav prev">PREV</div>
</div>

then if you have

$nav = $('.nav');
$next = $nav.filter('.next');
$prev = $nav.filter('.prev');

ADDITION TO ANSWER

You can also use .filter() to reference attributes such as data-*=, name=, type= and so on so forth.

Answer 2

You can use:

element.find(':first-child')