Question

我有一段代码如下： -

<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>

我必须通过jquery选择第一个和最后一个local-intranets类。怎么做。我没有任何其他特定的div类可供选择。我先尝试过：孩子和最后：孩子，但它不起作用。

Answer 1

您可以使用css伪类子选择器：

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

您还可以更具体：

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

或使用jquery first和last方法：

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

Answer 2

使用jquery的first和last方法

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

修改

您也可以使用:first-child和:last-child。

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

Answer 3

使用伪选择器

$（＆＃34; .local-intranets：first＆＃34;）。

More info

Answer 4

一种选择是使用.first() and .last()

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

使用filter()和:first以及:last选择器

$('.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

您可以使用last()或first()来执行此操作。例如，要更改local-intranets类的第一个和最后一个元素的颜色，您可以这样做：

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

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

6 个答案: