10/12/2018, 19:21

JQuery selector advanced

Xin chào mọi người. Thì hôm nay trong lúc làm việc mình có gặp một vấn đề nho nhỏ về việc tìm Selector trong JQuery. Mình biết có thể làm bằng một số cách khác như cậu em đồng nghiệp của mình tư vấn là dùng vòng FOR để chọn. Nhưng do tần suất sử dụng cái kiểu chọn selector này khá là nhiều nên ...

Xin chào mọi người. Thì hôm nay trong lúc làm việc mình có gặp một vấn đề nho nhỏ về việc tìm Selector trong JQuery. Mình biết có thể làm bằng một số cách khác như cậu em đồng nghiệp của mình tư vấn là dùng vòng FOR để chọn. Nhưng do tần suất sử dụng cái kiểu chọn selector này khá là nhiều nên mình nghĩ cách đó không khả thi chút nào.

Các bạn xem tình huống như sau:

<tr>
  <td data-order_no="1">TD #0</td>
  <td data-order_no="2">TD #1</td>
  <td data-order_no="3">TD #2</td>
</tr>

Vấn đề của mình là: Làm thế nào để lấy được các selector có giá trị data-order_no nhỏ hơn một số bất kỳ nào đó. Cũng đơn giản phải không các bạn. Và mình tin rằng trong đầu các bạn sẽ có vô số ý tưởng cho việc này.

Ví dụ: Nếu mình chọn 2 thì kết quả mình mong muốn là:

<tr>
  <td data-order_no="1">TD #0</td>
</tr>

Tương tự nếu mình chọn 3:

<tr>
  <td data-order_no="1">TD #0</td>
  <td data-order_no="2">TD #1</td>
</tr>

Và đây là giải pháp của mình:

(function($) {
  $.fn.getSelectorCustom = function(prop, val) {
	var $self = this;
	if (typeof val === 'undefined') {
	  return $self.filter(
		function() {
		  return typeof $(this).data(prop) !== 'undefined';
		});
	}
	return $self.filter(
	  function() {
		return $(this).data(prop) <= val;
	  });
  };
})(window.jQuery);

Kết quả thì bạn có thể xem ở ví dụ sau:

Xem kết quả

Kết luận

Trên đây là mình trình bày theo ý kiến cá nhân mình. Nếu các bạn có một phương pháp hay hơn có thể comment ý kiến của các bạn xuống bên dưới mình sẽ tiếp thu và cảm ơn các bạn.

0