JqueryJquery Tips

Jquery Tips

Contains common Jquery code

  • Display jQuery version
  • Find how many check boxes have been checked
var count = $('input[type=checkbox]:checked').length;
  • Get ID, class of an element
var element_id = $(this).attr('id');   or element_id = this.id;
var class = $(this).attr('class');   or class = this.class;
  • Set the attribute of an element
$(this).attr('class', 'new-class');
$(this).attr('title', 'new-title');
  • Set multiple attributes for an element
  class: 'new-class',
  title: 'new-title'
  • Checking and Un-checking a check-box
this.checked = false; //un-check
this.checked = true;  //check
  • Loop through all check-boxes and find if they are checked
$('input[type=checkbox]').each(function () {    
    var is_checked = (this.checked ? "1" : "0");
  • Loop through all radio buttons in a form
$("#form-id").find(':radio').each(function() {
   radio_id = $(this).attr('id');
   radio_name = $(this).attr('name');
  • Find all child radio elements
  • Find all child radio elements that are selected
  • PHP like explode and implode functions in Javascript
var my_string = "abc-def-ghi-jkl";
var my_array = [];
my_array = my_string.split("-");

var my_array = new Array('abc', 'def', 'ghi', 'jkl');
var my_string = "";
my_string = my_array.join("-");
  • Disable all radios of a group
$('input:radio[name=radio-group-name]').attr('disabled', true);
  • Get the value of the selected radio button in a group
  • Disable all input elements in a form (input, textarea, select and button)
$("#form-id :input").attr("disabled", true);
  • Disable only input elements of a form
$("#form-id input").attr("disabled", true);
  • Get the current page url
var current_page_url = window.location.pathname;
  • jQuery Table parsing
Lets say you have a table like this 

<table id='table-1' border="1">
  <tr id='row-1'>
      <td id='td-1'>Value 1</td>
      <td id='td-2'></td>
  <tr id='row-2'>
      <td id='td-3'>Value 2</td>
      <td id='td-4'>Value 3</td>
      <td id='td-5'></td>
      <td id='td-6'></td>

$("#row-1").parent(); //references table-1
$("#row-2").parent(); //references table-1
$("#row-1").parent().attr('id'); //gets id=table-1
$("#row-1").next(); //references row-2
$("#row-2").prev(); //references row-1
$("#row-2").previous().attr('id'); //gets id=row-1
$("#td-1").next(); //references td-2
$("#td-2").prev(); //references td-1
$("#td-2").next(); //undefined
$("#td-3").next(); //references td-4
$("#td-4").prev(); //references td-3
$("#td-3").siblings(":eq(0)"); //references td-4
$("#td-3").siblings(":eq(1)"); //references td-5
$("#td-3").siblings(":eq(2)"); //references td-6
$("#td-3").siblings(":eq(0)").text(); //gets 'Value 3'
$("#td-4").siblings(":eq(0)"); //references td-5
$("#td-4").siblings(":eq(1)"); //references td-6
$("#td-4").siblings(":eq(-1)"); //undefined :eq() takes only +ve input
$("#td-4").siblings().eq(0); //references index[0] in all siblings: td-3
$("#td-4").siblings().eq(1); //references td-5
$("#td-4").siblings().eq(2); //references td-6
$("#td-4").siblings().eq(-1); //references td-6 : reverse index

Categories: Jquery


No Comments Yet. Be the first?

Post a comment

Your email address will not be published. Required fields are marked *