jQuery - contains selector

contains selector thường được dùng để tìm kiếm những HTML DOM có chứa chuỗi cần tìm(có phân biệt chữ hoa, chữ thường).

Cách thức sử dụng như sau:

• jQuery(":contains('text')"): trả ra danh sách tất cả các object có chứa chuỗi text.
• jQuery("div:contains('text')"): trả ra danh sách các object là thẻ div có chứa chuỗi text.

Ví dụ ta có thẻ ul có 5 thẻ con như sau

<ul id="contains_ul" style="float:left;">
 <li>Lorem ipsum dolor sit amet.</li>
 <li>Consectetur adipiscing elit.</li>
 <li>Fusce semper sapien nec urna.</li>
 <li>Curabitur vehicula, dui eu rutrum sollicitudin.</li>
 <li>Feugiat convallis sed sit amet velit.</li>
</ul>

Điền từ cần tìm kiếm vào ô textbox, click button contains. Nếu chuỗi cần tìm kiếm nằm trong nội dung của 1 trong 5 dòng thì chữ ở dòng đó sẽ chuyển sang màu đỏ.

Code

<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery("#contains").click(function(){
  jQuery("#contains_ul li").each(function(){
   jQuery(this).css("color","black");
  });
  jQuery("#contains_ul li:contains('"+jQuery("#contains_text").val()+"')").css("color","red");  
 });
});
</script>
<div>
 <ul id="contains_ul" style="float:left;">
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Consectetur adipiscing elit.</li>
  <li>Fusce semper sapien nec urna.</li>
  <li>Curabitur vehicula, dui eu rutrum sollicitudin.</li>
  <li>Feugiat convallis sed sit amet velit.</li>
 </ul>
 <div style="float:left;padding:20px 20px;">
  <input type="text" value="" id="contains_text"/><br/>
  <input type="button" value="contains" id="contains"/><br/>
 </div>
 <div style="clear:both;"></div>
</div>

Demo

• Lorem ipsum dolor sit amet.
• Consectetur adipiscing elit.
• Fusce semper sapien nec urna.
• Curabitur vehicula, dui eu rutrum sollicitudin.
• Feugiat convallis sed sit amet velit.