Để lấy phần tử con đầu tiên của một phần tử HTML bằng jQuery, cách đơn giản nhất là với bộ chọn jQuery: first-child.

Bạn đang xem : jquery tìm phần tử con đầu tiên của kiểu

Để lấy phần tử con đầu tiên của một phần tử HTML bằng jQuery, cách đơn giản nhất là sử dụng jQuery : first-child selector.

  $ ("# div p: first-child");  

Giả sử tôi có HTML sau:

  & lt; div id = "div1" & gt;
   & lt; p & gt; Đây là con đầu tiên của # div1 & lt; / p & gt;
   & lt; p & gt; Đây là con thứ hai của # div1 & lt; / p & gt;
   & lt; p & gt; Đây là con thứ ba của # div1 & lt; / p & gt;
   & lt; p & gt; Đây là con thứ tư của # div1 & lt; / p & gt;
& lt; / div & gt;
 

Để lấy đoạn con đầu tiên của div, chúng ta có thể sử dụng bộ chọn jQuery : first-child và sử dụng mã Javascript sau:

< pre> $ ("# div1 p: first-child");

Nếu bạn đang sử dụng WordPress, đừng quên thay đổi $ sang jQuery như bên dưới:

  jQuery ("# ​​div1 p: first-child");  

Cách lấy Phần tử con đầu tiên khi nhấp chuột bằng jQuery

Chúng ta có thể lấy phần tử con đầu tiên của một phần tử HTML bằng jQuery rất dễ dàng bằng cách kết hợp bộ chọn : first-child với một sự kiện nhấp chuột.

Giả sử chúng ta có mã HTML sau và chúng ta muốn thay đổi màu nền của đoạn đầu tiên.

  & lt; div id = "div1" & gt;
  & lt; p & gt; Đây là đoạn 1 & lt; / p & gt;
  & lt; p & gt; Đây là đoạn 2 & lt; / p & gt;
  & lt; p & gt; Đây là đoạn 3 & lt; / p & gt;
& lt; / div & gt;
& lt; div id = "click-me" & gt; Thay đổi nền & lt; / div & gt;
 

Chúng tôi có thể sử dụng bộ chọn jQuery : first-child và phương thức jQuery css () để thay đổi nền của đoạn văn.

Xem Thêm  SQL COUNT: Hướng dẫn cơ bản về hàm COUNT trong SQL - sql chọn nơi đếm

Dưới đây là đoạn mã Javascript cho phép người dùng có thể chọn đoạn văn đầu tiên và đặt màu nền mới bằng jQuery.

  $ (" # click-me "). click (function () {
    $ ("# div1 p: first-child"). css ("background", "green");
});  

Dưới đây là mã cuối cùng và đầu ra cho ví dụ này về cách thay đổi nền của con đầu tiên của một div bằng jQuery và Javascript:

Đầu ra mã: < / p>

Đây là đoạn 1

Đây là đoạn 2

Đây là đoạn 3

Thay đổi nền

Mã đầy đủ:

  & lt; div id = "div1" & gt;
    & lt; p & gt; Đây là đoạn 1 & lt; / p & gt;
    & lt; p & gt; Đây là đoạn 2 & lt; / p & gt;
    & lt; p & gt; Đây là đoạn 3 & lt; / p & gt;
& lt; / div & gt;
& lt; div id = "click-me" & gt; Thay đổi nền & lt; / div & gt;
& lt; script & gt;
$ ("# click-me"). nhấp vào (function () {
    $ ("# div1 p: first-child"). css ("background", "green");
});
& lt; / script & gt;
 

Hy vọng rằng bài viết này hữu ích để giúp bạn hiểu cách sử dụng jQuery để lấy phần tử con đầu tiên từ phần tử HTML mẹ.


Xem thêm những thông tin liên quan đến chủ đề jquery tìm con đầu tiên của loại

jQuery: Search, Find and Highlight using jQuery

  • Tác giả: Crypters Infotech
  • Ngày đăng: 2016-08-17
  • Đánh giá: 4 ⭐ ( 2078 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: https://www.udemy.com/course/jquery-web-development-made-easy/?referralCode=65882CEEB151DBF75AEE
    jQuery in Action: Build 15 jQuery Projects

    https://www.udemy.com/course/jquery-ui-practical-build-jquery-ui-projects/?referralCode=75D379628D2FB4BF5134
    jQuery UI in Action: Build 9 jQuery UI Projects

    https://www.udemy.com/course/hands-on-jquery-jquery-examples/?referralCode=925EF917F513C5A6B847
    Hands-On jQuery: jQuery Examples

    Find all our Udemy courses here:
    https://www.udemy.com/user/cryptersinfotech/

    jQuery: Search, Find and Highlight using jQuery

    Learn how to search, find and highlight some text using jQuery.

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 1954 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu Selector là gì? Tìm hiểu cú pháp selector trong jQuery, xử lý duyệt các phần tử trong kết quả trả về của selector trong jquery dành cho người mới.

Selector trong jQuery

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 9640 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Selector trong jQuery – Học jQuery cơ bản và nâng cao theo các bước đơn giản về jQuery Selector, Bộ chọn, thuộc tính, Attribute, CSS, Thao tác DOM, Truy cập DOM, AJAX trong jQuery, hiệu ứng, sự kiện trong jQuery, Drag và Drop, Effect, Event Handler, UI, Plug-ins và các tiện ích khác trong jQuery.

find() và closest() trong JQuery

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 4159 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mở đầu Như các bạn đã biết ( hoặc chưa biết cũng chẳng sao 😀 ) thì JQuery là một thư viện javascript chuyên dùng cho việc thao tác với DOM.

jQuery con đầu tiên của “this”

  • Tác giả: vi.theshuggahpies.com
  • Đánh giá: 3 ⭐ ( 8107 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang cố chuyển “this” từ một khoảng được nhấp vào một hàm jQuery, sau đó có thể thực thi jQuery trên phần tử con đầu tiên được nhấp đó. Dường như không thể hiểu đúng …

    By ads_php