Using jQuery with forms - part 5 (Traversing)

Monday, 7 December 2009


This is the fifth in a series of tutorials on using jQuery to manipulate forms. In this series I will be looking at parts of the jQuery API reference in detail. In this tutorial I will be looking at forms and jQuery Traversing.

Filtering


eq(index)

Matches the element from a group at a particular index

// Set the second radio element with name foods to checked
$("#my_form radio[name='foods']:eq(2)").attr('checked', 'checked');

filter(expr)

Removes elements from a group that do not match the expression

// Set all of the input elements that have the class error and out_of_range to red
$("#my_form :input").filter('.error, .out_of_range').css('color', 'red');

filter(fn)

Removes elements from a group that do not match the supplied function, useful if you want to remove elements based on a complex function

// Set all of the input elements that have the class error and out_of_range to red
$("#my_form :input").filter(function(index) {
 if ((index > 6) || ($(this).attr("type") == "hidden)) {
  return true;
 }
}).css('color', 'red');

is(expr)

Used to check if one of the matched elements matches the expression

// Checks to see if any of the password elements has the error class

if ($("#my_form :password").is('.error')) {
 alert('A password field is still in error');
}

map(callback)

Takes a set of elements and maps each one onto the callback

// This is a very useful function but takes some understanding, rather than looking at the function below I suggest you check out this page for practical uses of this function.

// Map all of the options from #myselect to the $(this).val() function, get the actual DOM elements and join them with a comma
alert($("#myselect option").map(function() {return $(this).val();}).get().join(', '));

not(expr)

Removes elements that do not match the expression from the set

// Get all of the input elements and remove those that are not inputs and then apply a grey background
$("#my_form :input").not(":password").css('background', 'grey');

slice(start, end)

Selects a subset of the elements based on start and end index

// Hide all of the radio elements with name foods except the first and last element
$("radio[name='foods']").slice(1, ($("radio[name='blah']").size() - 1)).hide();

Finding


add(expr)

Adds a set of elements to an existing group

// Set all of the select elements to red border then set all of the select and text elements to color blue
// This could be useful if you wanted to show which elements had been validated as well as those that are in error
$(":select").css('border', '1px solid red').add(":text").css('color', 'blue');

children(expr)

Selects all the children of an element and optionaly filters them according to the expression

// Retrieve all of the select children elements of my form that have the class validated
$("#my_form :select").children(".validated");

closest(expr)

Closest works by first looking at the current element to see if it matches the specified expression, if so it just returns the element itself. If it doesn't match then it will continue to traverse up the document, parent by parent, until an element is found that matches the specified expression. If no matching element is found then none will be returned.

// If a button is clicked it checks to see if it has the disabled class, if not it traverses up the document to find the closest element with the disabled class and then adds the matched class
$("button").click(function(e) {
  $(e.target).closest(".disabled").addClass("matched");
});

find(expr)

Searches for decendant elements that match the given expression

// Apply a yellow background to all p elements that are descendants of the .login_entry fieldset

$(":fieldset .login_entry").find("p").css('background', 'yellow');

next(expr) / nextAll(expr)

Find the next (the siblings after) sibling matching expr or find all the sibling after this element matching expr

// Set the text element directly after a disabled button to read 'this button is disabled'
$("button[disabled]").next().text("this button is disabled");

// Hide all p siblings after a disabled button
$("button[disabled]").nextAll("p").hide();

prev(expr) / prevAll(expr)

Find the previous (the siblings before) sibling matching expr or find all the siblings before this element matching expr


siblings(expr)

Find all the siblings of this element matching expr


parent(expr) / parents(expr)

Find the parent of this element (can be called on a group and filtered by expression) / Find all the parents of this element (the unique ancestors)

// If a parent contains a disabled button then hide it
$("button[disabled]").parent().hide();

Chaining


andSelf()

Find the parent of this element (can be called on a group and filtered by expression) / Find all the parents of this element (the unique ancestors)

// Find all fieldsets that contain radio elements and place a border around the radio elements and around the fieldset
$("fieldset").find(":radio").andSelf().css('border', '1px solid green');

If you found this post useful, here are part 1, part 2, part 3 and part 4 of this series.
blog comments powered by Disqus