The selector for selecting child elements in jquery is the nth-child selector-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

The selector for selecting child elements in jquery is the nth-child selector

黄舟

Jun 23, 2017 pm 02:16 PM

jquerynth-childelementchooseSelector

jQuery The nth-child selector is used to select the nth child tag of its parent tag. Its index starts from 1, that is, n starts from 1, not from 0.

For example:

1 $(‘tr:nth-child(3)’) —Select the third tr child element in the tr parent tag element.

2 $(‘tr:nth-child(3n)’)—Select the tr child tag element at the 3rd multiple position in the tr parent tag.

3 $(‘tr:nth-child(even)’)—Selects all even-numbered tr child elements in the tr parent tag.

jquery Example

A simple example is used to illustrate nth-childFunctionDynamicly change the background color of the table row.

<html>  
    <head>  
        <title>jquery nth-child example</title>  
        <script type="text/javascript" src="../jquery-1.11.1.min.js"></script>  
    </head>  
    <body>  
        <h1 id="jquery-nbsp-nth-child-nbsp-example">jquery nth-child example</h1>  
        <table boder=1>  
            <tr><td>row 1</td></tr>  
            <tr><td>row 2</td></tr>  
            <tr><td>row 3</td></tr>  
            <tr><td>row 4</td></tr>  
            <tr><td>Row #5</td></tr>  
    <tr><td>Row #6</td></tr>  
    <tr><td>Row #7</td></tr>  
    <tr><td>Row #8</td></tr>  
    <tr><td>Row #9</td></tr>  
    <tr><td>Row #10</td></tr>  
        </table>  
        <br/>  
        <button>:nth-child(4)</button>  
            <button>:nth-child(3n)</button>  
                <button>:nth-child(even)</button>

     <button>:nth-child(odd)</button>  
                <script type="text/javascript">  
                    $("button").click(function(){  
                        var str=$(this).text();  
                        $("tr").css("background","white");  
                        $("tr"+str).css("background","coral");  
                          
                          
                        });  
                      
                      
                    </script>  
</body>  
lt;/html>

Effect:

The selector for selecting child elements in jquery is the nth-child selector

Click button 1:

The selector for selecting child elements in jquery is the nth-child selector

##Click button 2

The selector for selecting child elements in jquery is the nth-child selector

Click button 3:

The selector for selecting child elements in jquery is the nth-child selector

Click button 4:

The selector for selecting child elements in jquery is the nth-child selector

The above is the detailed content of The selector for selecting child elements in jquery is the nth-child selector. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn