The third part of the jQuery selector series: Index selector for filtering selector and jquery Selector

The third part of the jQuery selector series: Index selector for filtering selector and jquery Selector
* Directory [1] General Form [2] First and last indexes [3] before the parity index [4] range index

The previous article introduced the sub-element selector in the filter selector. This article introduces the index selector that is easily confused with it.

 

General Form

$ (': Eq (index )')

$ (': Eq (index)') selector selects the element whose index is equal to index (index starts from 0) and returns a single element

Index

[Note] the index of the index selector is significantly different from that of the sub-element selector.

[1] index selector index starts from 0, while sub-element selector index starts from 1

[2] The index of the index selector is the index of the specified element, and the index of the sub-element selector is the index of all sub-elements.

<div>    <i>0</i>    <span>1</span>    <i>2</i>    <span>3</span></div>

If you want to select the <span> 1 <span> element, if you want to use the child element selector, set it

// Select the parent element as the second child element under the div element, and the child element is a span element (index starts from 1) $ ('div span: nth-child(2)'hangzhou.css ('color ', 'red ');

If the index selector is used, it is set

// Select the first span element under the div element as the parent element (index starts from 0) $ ('div span: eq(0w.'0000.css ('color', 'Blue ');

<button id='btn1'>$('div span:nth-child(2)')</button><button id='btn2'>$('div span:eq(0)')</button><div>    <i>0</i>    <span>1</span>    <i>2</i>    <span>3</span></div><script>btn1.onclick = function(){    $('div span:nth-child(2)').css('color','red');}btn2.onclick = function(){    $('div span:eq(0)').css('color','blue');}</script>

In CSS, the selector similar to the nth-child (n) selector is: nth-of-type (n),: nth-of-type (n) the selector returns the element whose index is equal to n (the index starts from 1)

If you want to use the nth-child (n) selector to select the <span> 1 <span> element in the above Code, set it

div span:nth-child(2){color:red;}

If the nth-of-type (n) selector is used, set it:

div span:nth-of-type(1){color:blue;}

Therefore, the CSS selector: nth-of-type (n) is similar to the index selector $ (': eq (index)' in jQuery, in the same place, the index refers to the index of the specified element.

There are two differences:

[1] CSS selector: nth-of-type (n) index starts from 1, while the index selector $ (': eq (index)' in jQuery starts from 0.

[2] CSS selector: nth-of-type (n) returns multiple elements, while the index selector $ (': eq (index)' in jQuery returns a single element.

$ (': Eq (0)') Select the element whose first index is equal to 0 $ ('span: eq (0 )') select the span element $ ('div span: eq (0) ') with the first index equal to 0 and select the first div element as the span element with the index equal to 0 under the parent element.

<Button id = "btn1"> reset. onclick = function () {history. go ();} // select the element whose first index is equal to 0 and the result is 
First-end index element Selector
For convenience, jQuery also defines how to obtain the first index element and the last index element.
$ (': First ')
$ (': First') selector selects the first 1st index elements to return a single element
$ (': Last ')
$ (': Last') selector selects the last index element that appears, and returns a single element
<Button id = "btn1" style = "color: red;" >$ ('div: first') </button> <button id = "btn2" style = "color: blue; ">$ ('div: la') </button> <button id =" btn3 "style =" color: green; ">$ ('div span: first ') </button> <button id = "btn4" style = "color: pink;" >$ ('div span: la ') </button> <button id = "reset"> restore </button> <div id = "t1"> <I> 1.1 </I> <span> 1.2 </span> </div> <p id = "t2"> <span> 2.1 </span> <I> 2.2 </I> </p> <div id = "t3"> <span> 3.1 </span> <I> 3.2 </I> </div> <script src = "jquery-3.1.0.js"> </script> <script> reset. onclick = function () {history. go () ;}// match the first parent element that appears as the 1st index element of the div element. The result is 1.1btn1.onclick = function () {$ ('div: first'0000.css ('color', 'red');} // match the final parent element of the div element with the last index element. The result is 3.2btn2.onclick = function () {$ ('div: last'0000.css ('color', 'blue');} // matches the first parent element to be the 1st span index elements of the div element, the result is 1.2btn3.onclick = function () {$ ('div span: first'0000.css ('color', 'green ');} // match the last span index element of the parent element of the div element. The result is 3.1btn4.onclick = function () {$ ('div span: last'hangzhou.css ('color ', 'Pink ') ;}</script>

The index selector at the beginning and end does not correspond to the first-of-type and last-of-type in CSS. Because the index selector at the beginning and end only selects a single element, and the CSS selector selects Multiple Elements
If you want to use javascript to implement functions similar to $ ('div span: last'0000.css ('color', 'pink '),
var divs = document.getElementsByTagName('div');for(var i = divs.length-1; i>-1;i--){    var spans = divs[i].getElementsByTagName('span');    if(spans){        spans[spans.length-1].style.color = 'pink';        break;    }    }
 
Parity Index element Selector
In addition to the aforementioned: eq (index),: first, And: last, all other index element selectors return collection elements. Next we will introduce the element selector of the parity index.
: Even
: Even Selects all the elements whose indexes are even numbers and returns the set elements.
: Odd
: Odd Selects all the elements whose indexes are odd and returns the collection elements.
<Button id = "btn1"> reset. onclick = function () {history. go ();} // match the element whose parent element is the div element with an even index. The result sequence numbers are 0, 2, 4, and 6btn1. onclick = function () {$ ('div: even'0000.css ('color', 'red');} // matches the element whose parent element is the div element with an odd number of indexes, result numbers are 1, 3, and 5btn2. onclick = function () {$ ('div: odd'0000.css ('color', 'blue');} // matches the element whose parent element is the div element and whose span element index is an even number, the result numbers are 0, 2, and 7btn3. onclick = function () {$ ('div span: even'0000.css ('color', 'green ');} // match the span element whose parent element is div and whose index is odd. The result numbers are 1 and 6btn4. onclick = function () {$ ('div span: odd'0000.css ('color', 'pink ') ;}</script>

The child element filter selector also has a similar parity selector, Which is nth-child (even) and nth-child (odd ). Since their indexes start to be different, the index representation is also different, so similar representations have different results
<Button id = "btn1"> reset. onclick = function () {history. go ();} // match the element whose parent element is the div element and whose index is an even number, because the index starts from 1, the result sequence numbers are 1, 3, 5, and 7 (corresponding indexes are 2, 4, 6, and 8) btn1.onclick = function () {$ ('div: nth-child(even='0000.css ('color ', 'red');} // match the element whose parent element is div element with an odd index, because the index starts from 1, result numbers are 0, 2, 4, and 6 (corresponding indexes are 1, 3, 5, and 7) btn2.onclick = function () {$ ('div: nth-child(odd1_'hangzhou.css ('color ', 'blue');} // matches the element whose parent element is the div element and whose index is an even number. The element is a span element, result numbers are 1 and 5 (corresponding indexes are 2 and 6) btn3.onclick = function () {$ ('div span: nth-child(even='0000.css ('color', 'green ');} // match the element whose parent element is div and whose index is odd, and the element is a span element, result numbers are 0, 2, and 6 (corresponding indexes are 1, 3, and 7) btn4.onclick = function () {$ ('div span: nth-child(odd1_'hangzhou.css ('color ', 'Pink ') ;}</script>
Range index element Selector
: Lt (index)
: Lt (index) selector selects the element whose index is smaller than index and returns the set element.
: Gt (index)
: The gt (index) selector selects the element whose index is greater than the index and returns the set element.
<Button id = "btn1" style = "color: red;" >$ ('div: lt (4 )') </button> <button id = "btn2" style = "color: blue;" >$ ('div span: lt (4 )') </button> <button id = "btn3" style = "color: green;" >$ ('div gt (3 )') </button> <button id = "btn4" style = "color: pink;" >$ ('div span: gt (3 )') </button> <button id = "reset"> restore </button> <div> <span> 0: span0 </span> <span> 1: span1 </span> <span> 2: span2 </span> <I> 3: i0 </I> <I> 4: i1 </I> <I> 5: i2 </I> <span> 6: span3 </span> <span> 7: span4 </span> </div> <script> reset. onclick = function () {history. go ();} // match the element whose parent element is div element index smaller than 4. The result sequence numbers are 0, 1, 2, and 3btn1. onclick = function () {$ ('div: lt(4'' '0000.css ('color', 'red ');} // match the index of the span element whose parent element is div element with an index smaller than 4. The result sequence numbers are 0, 1, 2, and 6btn2. onclick = function () {$ ('div span: lt(4)'0000.css ('color', 'blue');} // matches the element whose parent element is div element with an index greater than 1, the result sequence numbers are 2, 3, 4, 5, 6, and 7btn3. onclick = function () {$ ('div: gt(1neither '0000.css ('color', 'green ');} // match the index of the span element whose parent element is div element with an index greater than 1. The result sequence numbers are 2, 6, and 7btn4. onclick = function () {$ ('div span: gt(1neither '0000.css ('color', 'pink ');} </script>
 
Last
The index selector draws on the nth-of-type () selector of CSS, but has some changes and extensions. Changes occur when the index of the index selector refers to the index order of a specific element, and starts from 0. The Extended Range index selector is added. It is worth noting that: first,: last, And: eq () return a single element, while other index selectors return a set element.
Welcome