jquery pseudo child element filter Selector

Pseudo child element filter selector

This article mainly introduces the contents of the Nth-of-type () selector. This section does not appear in the "Sharp jquery" book, Nth-of-type () selector reference CSS in the Nth-of-type selector, in the 1.9 version of the new common form

: Nth-of-type ()

Personally,: the Nth-of-type () selector should not be categorized as a child element selector, nor exactly the index selector, because its index refers to the index of a particular element, but the index starts at 1 and returns the collection element. So, I call it the pseudo child element selector

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

corresponding to CSS: Nth-of-type () selector

Div Span:nth-of-type (2) {color:red;}

If you use JavaScript to achieve a similar effect

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= ' btn1 ' style= ' color:red >$ ' (' div span:nth-of-type (2) ') </button> <button id= ' btn2 ' style= ' Color:blue ">$ (' div span:nth-child (2) ') </button> <button id= ' btn3 ' style= ' Color:green ' >$ (' div span:eq (1) ') </button> <button id= "reset" > Restore </button> <div> <i>1.1</i> <span>1.2 </span> <span>1.3</span> </div> <div> <i>2.1</i> <span>2.2 </span> <span>2.3</span> </div> <script> reset.onclick = function () {history.go ();} btn1
. onclick = function () {//Select the 2nd span element of all the parent element as a DIV element, so the result is 1.3, 2.3 $ (' div span:nth-of-type (2) '). CSS (' Color ', ' red '); Btn2.onclick = function () {//Select the 2nd child element of all the parent element as a DIV element, and the child element is a SPAN element, so the result is 1.2, 2.2 $ (' div span:nth-child (2) '). CSS (' Colo
R ', ' Blue '); Btn3.onclick = function () {//Select the first occurrence of the parent element as the 1th span element of the DIV element (the index starts at 0), so the result is 1.3 $ (' div span:eq (1) '). CSS (' Color ', ' GRE
En '); } </script>

Of course $ (': Nth-of-type (Index) ') selector as a general form, can have a variety of parameter choices:

"1" $ (': Nth-of-type (even) ') selects all elements with an even number of index values

"2" $ (': Nth-of-type (Odd) ') selects all elements with an odd index value

"3" $ (': Nth-of-type (3n+1) ') Select all elements with index value (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 = function () {history.go ();}//Match an even-numbered element with an index of DIV for each parent element, resulting in 3 (2nd span), 6 (4th span), 4 (2nd i) Btn1.onclick =

Function () {$ (' Div:nth-of-type (even) '). CSS (' Color ', ' red '); Matches an odd-numbered element for each parent element with a Div, resulting in 1 (1th i), 2 (1th span), 5 (3rd span) Btn2.onclick = function () {$ (' Div:nth-of-type (Odd) '). CSS ('

Color ', ' blue '); An element that matches the index of Div (3n+1) for each parent element, and the index can be 1, 4. So the result is 1 (1th i), 2 (1th span), 6 (4th span) Btn3.onclick = function () {$ (' Div:nth-of-type (3n+1) '). CSS ('Color ', ' green '); </script>

Reverse Form

: Nth-last-of-type ()

: the 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 a similar effect

var divs = document.getelementsbytagname (' div ');
for (var i = 0; i < divs.length i++) {
    var children = Divs[i].children;
    var lastName = ';
    For
    (var j = children.length J > 1; j--) {
        //label first occurrence or odd number of occurrences
        if (children[j].nodename!= lastName) {
            children[j].style.color = ' red ';
            LastName = Children[j].nodename;
        The label appears for the second time or occasionally
        }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&lt ;/span> <span>6</span> </div> <script src= "Jquery-3.1.0.js" ></script> <script > Reset.onclick = function () {history.go ();}//Match elements with a div for each parent element (from the back-end), with a result of 5 (2nd span in the countdown), 2 (last 4th span), 1 (minus 2nd i)

Btn1.onclick = function () {$ (' Div:nth-last-of-type (even) '). CSS (' Color ', ' red '); Matches an odd number of elements (from the back forward) for each parent element as a div, resulting in 4 (1th i), 6 (Countdown 1th span), 3 (Countdown 3rd span) Btn2.onclick = function () {$ (' div:

Nth-last-of-type (Odd) '). CSS (' Color ', ' blue '); Matches an element (3n+1) that has an index of DIV for each parent element (from the back number), and the index can be 1, 4 (from the back-forward). So the result is 4 (1th i), 6 (Countdown 1th span), 2(Countdown 4th span) Btn3.onclick = function () {$ (' Div:nth-last-of-type (3n+1) '). CSS (' color ', ' green '); </script> 

The elements of the tail

$ (': First-of-type ')
: The First-of-type selector is the short form of the Nth-of-type (1) selector, which selects the first element in all the same elements

$ (': Last-of-type ')

Similarly, the $ (': Last-of-type ') selector selects the last element in 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& gt;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&gt
; <script src= "Jquery-3.1.0.js" ></script> <script> Reset.onclick = function () {history.go ();}//

The element that matches the index of 1 for each DIV element is the parent element, resulting in 1.1, 1.2, 3.1, 3.2 Btn1.onclick = function () {$ (' div:first-of-type '). CSS (' Color ', ' red ');

Matches an element with an index of 1 that is the parent element of each DIV element (from the back-forward number), resulting in the same as Btn2.onclick = function () {$ (' div:last-of-type '). CSS (' Color ', ' blue '); Match each DThe IV element is a SPAN element with an index of 1 for the parent element, resulting in 1.2, 3.1 Btn3.onclick = function () {$ (' div span:first-of-type '). CSS (' color ', ' green ');
The span element (from the back forward) that matches the index of 1 for each DIV element is the parent element, and the result is the same as Btn4.onclick = function () {$ (' div span:last-of-type '). CSS (' Color ', ' pink '); </script>

The end pseudo child element selector corresponds to the CSS in the following: First-of-type and: Last-of-type

If you want to accomplish 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 are using the JavaScript selector to complete the last feature above, this is as follows

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 that do not have sibling elements with the same name

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

corresponding to CSS: Only-of-type selector

Div Span:only-of-type{color:green;}

If you are using a JavaScript implementation, as shown below

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 >
<div>
    <span>2.1</span>
    <i>2.2</i>
</div>
<script src= "Jquery-3.1.0.js" ></script>
<script>
reset.onclick = function () { History.go ();}
There is only one <span> element in the 2nd Div, so the result is 2.1
Btn1.onclick = function () {$ (' div span:only-of-type '). CSS (' Color ', ' Green ');}
</script>