jQuery Traversing: Siblings và Filtering

Khi thao tác với DOM, không phải lúc nào bạn cũng cần tìm tổ tiên (ancestor) hay con cháu (descendant).
Đôi lúc, bạn cần di chuyển qua các phần tử ngang hàng (siblings) — những phần tử có chung cha mẹ, hoặc lọc ra những phần tử cụ thể theo điều kiện.

jQuery cung cấp bộ phương thức traversing siblings và filtering rất mạnh mẽ, giúp bạn:

• Dễ dàng di chuyển giữa các phần tử cùng cấp.
• Lọc phần tử theo điều kiện chính xác nhanh chóng.

Trong bài viết này, chúng ta sẽ khám phá:

• Các phương thức traversing siblings như siblings(), next(), nextAll(), prev(), prevAll()
• Các phương thức filtering như first(), last(), eq(), filter(), not()
• Kèm theo ví dụ minh họa trực quan

1. Traversing Siblings (Đi tới phần tử ngang hàng)

1.1. siblings()

• Trả về tất cả phần tử ngang hàng với phần tử được chọn (có cùng parent).

Cú pháp:

$(selector).siblings();
$(selector).siblings(filter);

Ví dụ:

<ul>
  <li>Item 1</li>
  <li class="selected">Item 2</li>
  <li>Item 3</li>
</ul>

<script>
$(document).ready(function(){
  $(".selected").siblings().css("color", "red");
});
</script>

Giải thích:Item 1 và Item 3 sẽ được tô màu đỏ, vì là siblings của Item 2.

1.2. next()

• Trả về phần tử kế tiếp ngay sau phần tử được chọn.

Cú pháp:

$(selector).next();
$(selector).next(filter);

Ví dụ:

<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>

<script>
$(document).ready(function(){
  $(".highlight").next().css("font-weight", "bold");
});
</script>

Giải thích:Paragraph 3 sẽ được làm đậm chữ.

1.3. nextAll()

• Trả về tất cả phần tử kế tiếp sau phần tử được chọn (không dừng lại).

Cú pháp:

$(selector).nextAll();
$(selector).nextAll(filter);

Ví dụ:

<div>Div 1</div>
<div class="start">Div 2</div>
<div>Div 3</div>
<div>Div 4</div>

<script>
$(document).ready(function(){
  $(".start").nextAll().css("background", "lightblue");
});
</script>

Giải thích:Div 3 và Div 4 sẽ có nền màu xanh nhạt.

1.4. prev()

• Trả về phần tử liền kề phía trước phần tử được chọn.

Cú pháp:

$(selector).prev();
$(selector).prev(filter);

Ví dụ:

<h2>Heading 1</h2>
<h2 class="current">Heading 2</h2>

<script>
$(document).ready(function(){
  $(".current").prev().css("text-decoration", "underline");
});
</script>

Giải thích:Heading 1 sẽ được gạch chân.

1.5. prevAll()

• Trả về tất cả phần tử phía trước phần tử được chọn.

Cú pháp:

$(selector).prevAll();
$(selector).prevAll(filter);

Ví dụ:

<div>Section 1</div>
<div>Section 2</div>
<div class="highlight">Section 3</div>

<script>
$(document).ready(function(){
  $(".highlight").prevAll().css("color", "green");
});
</script>

Giải thích:Section 1 và Section 2 sẽ chuyển màu chữ sang xanh.

2. Filtering (Lọc phần tử)

Sau khi đã traversed (duyệt phần tử), bạn có thể lọc các phần tử mình cần với những phương thức mạnh mẽ sau:

2.1. first()

• Trả về phần tử đầu tiên trong tập hợp.

Cú pháp:

$(selector).first();

Ví dụ:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<script>
$(document).ready(function(){
  $("li").first().css("font-size", "20px");
});
</script>

2.2. last()

• Trả về phần tử cuối cùng trong tập hợp.

Cú pháp:

$(selector).last();

Ví dụ:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

<script>
$(document).ready(function(){
  $("li").last().css("color", "orange");
});
</script>

2.3. eq(index)

• Trả về phần tử ở vị trí cụ thể (0-based index).

Cú pháp:

$(selector).eq(index);

Ví dụ:

<ul>
  <li>Cat</li>
  <li>Dog</li>
  <li>Rabbit</li>
</ul>

<script>
$(document).ready(function(){
  $("li").eq(1).css("background-color", "yellow");
});
</script>

Giải thích:Dog sẽ được tô nền vàng (index bắt đầu từ 0).

2.4. filter(selector)

• Giữ lại các phần tử phù hợp với bộ lọc.

Cú pháp:

$(selector).filter(filter);

Ví dụ:

<div class="box red"></div>
<div class="box blue"></div>

<script>
$(document).ready(function(){
  $(".box").filter(".red").css("border", "2px solid red");
});
</script>

2.5. not(selector)

• Loại bỏ các phần tử phù hợp với bộ lọc.

Cú pháp:

$(selector).not(filter);

Ví dụ:

<button class="btn save">Save</button>
<button class="btn cancel">Cancel</button>

<script>
$(document).ready(function(){
  $(".btn").not(".save").css("opacity", "0.5");
});
</script>

Giải thích: chỉ Cancel bị giảm độ mờ, còn Save giữ nguyên.

3. Bảng tổng hợp nhanh

Kết luận

Việc traversing siblings và filtering elements bằng jQuery giúp bạn:

• Điều hướng linh hoạt giữa các phần tử ngang hàng trong DOM.
• Lọc dữ liệu chính xác theo yêu cầu.
• Tối ưu hóa code khi thao tác với nhiều phần tử phức tạp.

Hãy luyện tập thêm các ví dụ phức tạp hơn để làm chủ traversing và filtering trong jQuery nhé!