사용자 도구

사이트 도구


wiki:javascript:jquery:jquery_note:jquery:last_selector

jQuery :last Selector

  • description : jQuery :last Selector
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-06-02


The source of this article

Example

마직막 <p> 요소를 선택합니다.

<body>
 
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>
  <p>This is the last paragraph.</p> <!-- 텍스트 컬러 변경됨 -->
 
  <script>
    $(document).ready(function () {
      $("p:last").css("color", "crimson");
    });
  </script>
</body>

Definition and Usage

:last 선택자는 마지막 요소를 선택합니다.

Note: 이 선택자는 단일 요소만 선택할 수 있습니다. 두 개 이상의 요소를 선택하려면 :last-child 선택자를 사용하십시오 (각 부모에 대해 하나씩).

이것은 주로 그룹의 마지막 요소를 선택하기 위해 다른 선택자와 함께 사용됩니다 (위의 예제에서 같이).

Tip: 그룹의 첫 번째 요소를 선택하려면, :first 선택자를 사용하십시오.

Syntax

$(":last")

Example

:last:last-child의 차이점을 보여줍니다.

<body>
 
  <button id="btn1">:last</button>
  <button id="btn2">:last-child</button><br><br>
 
  <div style="border:1px solid darkgreen">
    <p>The first paragraph in div</p>
    <p>The last paragraph in div</p> <!-- last -->
  </div><br>
 
  <div style="border:1px solid dodgerblue">
    <p>The first paragraph in another div</p>
    <p>The last paragraph in another div</p> <!-- last & last-child -->
  </div>
 
  <script>
    $(document).ready(function () {
      $("#btn1").click(function () {
        $("p:last").css("background-color", "red");
      });
      $("#btn2").click(function () {
        $("p:last-child").css("background-color", "yellow");
      });
    });
  </script>
 
</body>
/var/services/web/dokuwiki/data/pages/wiki/javascript/jquery/jquery_note/jquery/last_selector.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)