通过JQuery选择第一个和最后一个孩子

Question

I have a piece of code as below :-

<table class="abc">
    <tbody>
        <tr>
            <td id="scriptWPQ22">
                <table id="Hero-WPQ22" dir="none" cellpadding="0" cellspacing="0" border="0" summary="MeetTheTeam" class="greenroom-meettheteam">
                    <tbody>
                        <tr>
                            <td class="ms-list-addnew ms-textLarge ms-soften"></td>
                        </tr>
                    </tbody>
                </table>
                <div></div>
                <iframe src="javascript:false;" id="FilterIframe49" name="FilterIframe49" style="display:none" height="0" width="0" filterlink="?"></iframe>
                <div class="local-intranets">
                    <div class="local-intranets-title">Budapest
                            </div>
                </div>
                <div class="local-intranets">
                    <div class="local-intranets-title">Moscow</div>
                </div>
                <div class="local-intranets">
                    <div class="local-intranets-title">Stockholm
                                    </div>
                </div>
                <div class="local-intranets">
                    <div class="local-intranets-title">Warsaw
                                        </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

I have to pick first and last local-intranets class by jquery. How to do that. I have no any other specific class of div to pick. I tried first:child and last:child, but its not working.

Answer 1

You can use the css pseudo-class child selector:

$('.local-intranets:first-child')
$('.local-intranets:last-child')

You can also be more specific:

$('#scriptWPQ22 .local-intranets:first-child')
$('#scriptWPQ22 .local-intranets:last-child')

Or use the jquery first and last methods:

$('.local-intranets').first()
$('.local-intranets').last()

Answer 2

Use first and last methods of jquery

var $localIntranets = $( ".local-intranets" );
var first = $localIntranets.first();
var last  = $localIntranets.last();

Edit

You can use :first-child and :last-child as well.

var first = $( ".local-intranets:first-child" );
var last  = $( ".local-intranets:last-child" );

Answer 3

use Pseudo selector

$( ".local-intranets:first" ).

More info

Answer 4

1. One option is using .first() and .last()

 $('.local-intranets').first().css('color','red') $('.local-intranets').last().css('color','red') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="abc"> <tbody> <tr> <td id="scriptWPQ22"> <table id="Hero-WPQ22" dir="none" cellpadding="0" cellspacing="0" border="0" summary="MeetTheTeam" class="greenroom-meettheteam"> <tbody> <tr> <td class="ms-list-addnew ms-textLarge ms-soften"></td> </tr> </tbody> </table> <div></div> <iframe src="javascript:false;" id="FilterIframe49" name="FilterIframe49" style="display:none" height="0" width="0" filterlink="?"></iframe> <div class="local-intranets"> <div class="local-intranets-title">Budapest </div> </div> <div class="local-intranets"> <div class="local-intranets-title">Moscow</div> </div> <div class="local-intranets"> <div class="local-intranets-title">Stockholm </div> </div> <div class="local-intranets"> <div class="local-intranets-title">Warsaw </div> </div> </td> </tr> </tbody> </table> 

Answer 5

Using filter() and :first and :last selectors

 $('.local-intranets').filter(':first, :last').css('color','red') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="abc"> <tbody> <tr> <td id="scriptWPQ22"> <table id="Hero-WPQ22" dir="none" cellpadding="0" cellspacing="0" border="0" summary="MeetTheTeam" class="greenroom-meettheteam"> <tbody> <tr> <td class="ms-list-addnew ms-textLarge ms-soften"></td> </tr> </tbody> </table> <div></div> <iframe src="javascript:false;" id="FilterIframe49" name="FilterIframe49" style="display:none" height="0" width="0" filterlink="?"></iframe> <div class="local-intranets"> <div class="local-intranets-title">Budapest </div> </div> <div class="local-intranets"> <div class="local-intranets-title">Moscow</div> </div> <div class="local-intranets"> <div class="local-intranets-title">Stockholm </div> </div> <div class="local-intranets"> <div class="local-intranets-title">Warsaw </div> </div> </td> </tr> </tbody> </table> 

Answer 6

you can use last() or first() to do that. for example to change the color of first and last element of local-intranets class you can do this:

$( ".local-intranets" ).last().css( "color", "red" );
$( ".local-intranets" ).first().css( "color", "red" );