LA.NET [EN]

On the previous post, we’ve started looking at selectors. In this post, we’ll close our study of selectors and we’ll talk about the remaining selectors. Let’s get started with child selectors. Before going on, we need an HTML tree. The one we used in the last post will do it:

<h1 class="title">Getting started with selectors</h1>
<p>There are several kind of selectors. Here are some of the most use:</p>
<ul>
  <li>you can select by tag</li>
  <li id="selectByID">you can select by ID</li>
  <li class="something">you can select by class name</li>
  <li>you can select by by attribute</li>
  <li>you can select by attribute with value</li>
</ul>
<div>
  <p>This is a paragraph inside a div</p>
</div>

Now, we can proceed. There will be times where you’re interested in getting the child of an element. For instance, the following snippet gets the direct children of div elements:

$("div > p")

Notice that the previous form will only return the direct children, instead of all descendants (you get all descendants by using the expression $(“div p”)). JQuery lets you pick elements that contain other elements too. For instance, what do you think will happen with the following snippet:

$(“div:has(p)”)

If you say that it will return the div element which contains a paragraph, you’re absolutely correct! Notice that this is not the same as $(“div p”) (this last example returns all paragraphs contained on a div!). The only gotcha of this selector is that it only allows you to go one level down, ie, the following example won’t work:

$(“div:has(p:has(span))”)

Btw, getting all elements preceded by another is easily accomplished too. For instance,the  expression $(“ul+div”) returns all div elements immediately preceded by ul (in the previous snippet,we had one that fits this selector). In this case, you can also get the same result from the expression $(“ul~div”). Notice that the ~ char will return all div siblings (whether they‘re immediately  placed after the ul or not – for instance, if we had ul-p-div, then the last expression that used ~ would return a valid result, but the one that used the + form wouldn’t wrap any valid DOM node).

JQuery also supports selecting by position. Here are a couple of examples:

• you can wrap the first child in a JQuery object by using the :first selector. For instance, the expression $(“li:first”) returns the first li child defined on the page;
• you can get the last child by using the :last selector. Calling $(“li:last”) returns the last li element of the page;
• You can also get first and last children of items by using the :first-child and :last-child selectors. Besides getting the first and last child elements, you can also get a child at a specific position by using the :nth-child(pos) selector – where pos is the position of the element;
• there’s also a variation of previous form that consists on using the words odd or even to specify all odd and even children of a specific type (ex.: getting all the odd li elements can be achieved through the $(“li:nth-child(odd) expression). There’s even a more advanced pattern for getting positioned elements. For instance, suppose you want to get every 4th li element. Easily doable with something like $(“li:nth-child(4n)). Or probably you want every li item after each 4th element: $(“li:nth-child(4n+1)). Notice that the :nth-child selector starts its count in 1 (and not in 0);
• Still on positioning, there’s a couple of selectors you can use. the :eq(pos) selector returns the element positioned at position pos; :gt(pos) and :lt(pos) return all elements defined after pos (: gt selector) or all elements  positioned before pos (:lt selector).

Notice that if you have several li elements on different lists, then some of the previous selectors might end up returning li elements from different lists (unless, of course, you use a combination of selectors which end up limiting the returned elements).

There’s still a couple of selectors that we need to cover before we wrap up the selector portion of the tutorial, but we’ll leave them for future posts. Keep tuned for more on JQuery.