Go deep into the eighth part of the jQuery selector series-pseudo-sub-element selector for filtering selector, eighth part of jquery

Go deep into the eighth part of the jQuery selector series-pseudo-sub-element selector for filtering selector, eighth part of jquery
* Directory [1] General Form [2] Reverse form [3] First and last elements [4] Before unique elements

This article is a continuation of the child element selector. It mainly introduces the content of the nth-of-type () selector. This part of content does not appear in the book sharp jQuery. The nth-of-type () selector is added in version 1.9 by referring to the nth-of-type selector in CSS, this article will detail this content

 

General Form

: Nth-of-type ()

In my opinion, the nth-of-type () selector should not be classified as a sub-element selector, nor is it completely equivalent to an index selector, because its index refers to the index of a specific element, however, the index starts from 1 and returns a collection element. So I call it a pseudo-child element selector.

$('div span:nth-of-type(2)').css('color','red');

The nth-of-type () selector corresponding to CSS

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

If you use javascript to achieve similar results

var divs = document.getElementsByTagName('div');for(var i = 0; i < divs.length; i++){    var span2 = divs[i].getElementsByTagName('span')[1];    if(span2){        span2.style.color = 'red';    }}

<Button id = 'dn1'> reset. onclick = function () {history. go ();} btn1.onclick = function () {// select all the 2nd span elements whose parent element is the div element, so the result is 1.3, 2.3 $ ('div span: nth-of-type(2)'0000.css ('color', 'red');} btn2.onclick = function () {// select all the parent elements as the 2nd child elements of the div element, and the child element is a span element, so the result is 1.2, 2.2 $ ('div span: nth-child(2}'0000.css ('color', 'blue');} btn3.onclick = function () {// select the first occurrence of the parent element as the 1st span elements of the div element (the index starts from 0). Therefore, the result is 1.3 $ ('div span: eq(110000'0000.css ('color', 'green');} </script>

Of course, the $ (': nth-of-type (index)') selector is used as a common form and can have multiple Parameter options.

[1] $ (': nth-of-type (even)') selects all elements with an even index value.

[2] $ (': nth-of-type (odd)') selects all elements with an odd index value.

[3] $ (': nth-of-type (3n + 1)') select all elements whose index values are (3n + 1 ).

<Button id = "btn1" style = "color: red;" >$ (': nth-of-type (even )') </button> <button id = "btn2" style = "color: blue;" >$ (': nth-of-type (odd )') </button> <button id = "btn3" style = "color: green;" >$ (': nth-of-type (3n + 1 )') </button> <button id = "reset"> restore </button> <div> <I> 1 </I> <span> 2 </span> <span> 3 </span> <I> 4 </I> <span> 5 </span> <span> 6 </span> </div> <script src = "jquery-3.1.0.js"> </script> <script> reset. onclick = functio N () {history. go ();} // match the element whose parent element is div and whose index is an even number. The result is 3 (2nd spans) and 6 (4th spans), 4 (2nd I) btn1.onclick = function () {$ ('div: nth-of-type(even='0000.css ('color', 'red ');} // match the element whose parent element is div and whose index is odd. The result is 1 (1st I), 2 (1st span), 5 (3rd span) btn2.onclick = function () {$ ('div: nth-of-type(odd+'0000.css ('color', 'blue');} // The index matching each parent element as div is (3n + 1) the index can be 1 or 4. Therefore, the result is 1 (1st I), 2 (1st span), 6 (4th span) btn3.onclick = function () {$ ('div: nth-of-type(3n1_1}'0000.css ('color ', 'green') ;}</script>

Reverse form

: Nth-last-of-type ()

: Nth-last-of-type () selector Selects all nth elements, but counts from the last element to the first

$('div :nth-last-of-type(even)').css('color','red');

The corresponding CSS selector is: nth-last-of-type ()

div :nth-last-of-type(even){color:red;}

If you use javascript to achieve similar results

Var divs = document. getElementsByTagName ('div '); for (var I = 0; I <divs. length; I ++) {var children = divs [I]. children; var lastName = ''; // number from the back to the front for (var j = children. length; j>-1; j --) {// if (children [j] appears for the first time or an odd number of times for a tag. nodeName! = LastName) {children [j]. style. color = 'red'; lastName = children [j]. nodeName; // The second or even appearance of a tag} else {lastName = '';}}}

<Button id = "btn1" style = "color: red;" >$ (': nth-last-of-type (even )') </button> <button id = "btn2" style = "color: blue;" >$ (': nth-last-of-type (odd )') </button> <button id = "btn3" style = "color: green;" >$ (': nth-last-of-type (3n + 1 )') </button> <button id = "reset"> restore </button> <div> <I> 1 </I> <span> 2 </span> <span> 3 </span> <I> 4 </I> <span> 5 </span> <span> 6 </span> </div> <script src = "jquery-3.1.0.js"> </script> <script> reset. on Click = function () {history. go ();} // match the element whose parent element is div and whose index is an even number (from the back to the front). The result is 5 (the last 2nd spans), 2 (4th to the last span), 1 (2nd to the last I) btn1.onclick = function () {$ ('div: nth-last-of-type(even='0000.css ('color', 'red ');} // match each element whose parent element is div with an odd index (from the back to the front). The result is 4 (the last 1st I) and 6 (the last 1st span), 3 (the last 3rd span) btn2.onclick = function () {$ ('div: nth-last-of-type(odd1_'0000.css ('color', 'blue ');} // match the element whose parent element is div and whose index is (3n + 1) (from the back to the front). The index can be 1 or 4 (from the back to the Front ). So the result is 4 (the last 1st I), 6 (the last 1st span), 2 (the last 4th span) btn3.onclick = function () {$ ('div: nth-last-of-type(3n00001}'0000.css ('color', 'green');} </script>

Beginning and end Elements

$ (': First-of-type ')

: The first-of-type selector is an abbreviated form of the nth-of-type (1) selector. Select the first element of all the same elements.

$ (': Last-of-type ')

Similarly, the $ (': last-of-type') selector selects the last element of all the same elements.

<Button id = "btn1" style = "color: red;" >$ ('div: first-of-type ') </button> <button id = "btn2" style = "color: blue;" >$ ('div: last-of-type ') </button> <button id = "btn3" style = "color: green;" >$ ('div span: first-of-type ') </button> <button id = "btn4" style = "color: pink;" >$ ('div span: last-of-type ') </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 each div element with an index of 1 of the parent element. The result is 1.1, 1.2, 3.1, 3.2btn1.onclick = function () {$ ('div: first-of-type'0000.css ('color', 'red');} // matches the element whose each div element is the parent element with an index of 1 (number of forward elements from the back). The result is the same as that of btn2.onclick = function () {$ ('div: last-of-type'0000.css ('color', 'blue');} // matches the span element whose each div element is the parent element and whose index is 1, the result is 1.2, 3.1btn3.onclick = function () {$ ('div span: first-of-type'0000.css ('color', 'green ');} // match the span element whose parent element is an index of 1 (number of forward elements from the back). The result is the same as btn4.onclick = function () {$ ('div span: last-of-type'0000.css ('color', 'pink ');} </script>

The starting and ending pseudo-child element selectors correspond to the first-of-type and last-of-type in CSS respectively.

To complete the same function, the selector format is:

div :first-of-type{color:red;}div :last-of-type{color:blue;}div span:first-of-type{color:green;}div span:last-of-type{color:pink;}

If you want to use the javascript selector to complete the previous function, as shown below:

var divs = document.getElementsByTagName('div');for(var i = 0; i < divs.length; i++){    var spans = divs[i].getElementsByTagName('span');    spans[spans.length-1].style.color = 'pink';}

 

Unique element

: Only-of-type ()

: Only-of-type () selector Selects all elements without sibling elements with the same name

$('div span:only-of-type').css('color','green');

The only-of-type selector corresponding to CSS

div span:only-of-type{color:green;}

If javascript is used

var divs = document.getElementsByTagName('div');for(var i = 0; i < divs.length; i++){    var spans = divs[i].getElementsByTagName('span');    if(spans.length == 1){        divs[i].spans[0].color = 'green';    }}

<Button id = "btn1" style = "color: green;" >$ ('div span: only-of-type ') </button> <button id = "reset"> restore </button> <div> <span> 1.1 </span> <span> 1.2 </span> <I> 1.3 </I> </div> <span> 2.1 </span> <I> 2.2 </I> </div> <script src = "jquery-3.1.0.js"> </script> <script> reset. onclick = function () {history. go ();} // only one <span> element exists in the 2nd div, so the result is 2.1btn1.onclick = function () {$ ('div span: only-of-type'0000.css ('color ', 'green') ;}</script>

Last

Finally, the jQuery selector series is complete, and there is a lot more content than the native javascript selector. The jQuery selector is mainly based on the CSS selector and has been expanded. But in fact, too many selectors also increase the cost of selection, and also raised the performance issues of various selector selection.

If there is only one path, this path will be more difficult and you have to bite your teeth. If there are 10 channels, if there is enough time, you can repeat 10 channels to find the easiest way, that is, the best performance. If there is not enough time, you can only pick a path you are familiar with, but you do not always feel that you have chosen the easiest path.

Like the index selector: eq (), sub-element selector: nth-child (), and pseudo-sub-element selector: nth-of-type (). There are many methods, which are easy to confuse and there are multiple options when using them, but be careful when distinguishing

Richness is a good thing and a bad thing.

Library is a good thing and a bad thing

Above