How should I verify the page DOM when attaching jQuery/javascript events to elements?

Question

I'm using jQuery to add events to DOM elements. As I do this, I often times use selectors that technically could gather a list of matching items rather than just a single one. e.g. using the .children() and .find() methods I could find 0, 1 or many matching DOM elements.

Do I simply need to check .size() == 1 on every element as I attach events, or is there a simpler way to do this, e.g. a selector with an expected matches column that fails if that expected number is not equal to the size?

It seems silly I suppose, given that I also output the HTML and ought know the correct answer, but I have lots of DOM manipulations going on and was wondering if there's any kind of sanity checking mechanism built in or not.

Answer 1

You don't need to check them. Just use the method and call bind on it. If it returns one or more elements all the elements will have the event bound. If it doesn't return any elements it will not throw any error either.

Answer 2

You can place the selection into a local variable and then test the size:

var items = $(".items");

if (items.length == 1) {
    // Do you regular stuff here
} else if (items.length > 1) {
    // Log error to the console
    // Example: console.log('Too Many Items!!'); <- with firebug ofcourse
} else {
    // console.log("Too Few Items");
}

You can log the error to the console but then correct the problem for further code excution by doing this:

console.log('Too Many Items!!');
items = items.first();

Answer 3

I think you should design selector to fit your needs. If the goal to pick one element - use id selector or those that return one element or zero $("#").click(function_callback), if you need more - use other selectors. http://api.jquery.com/category/events/

Anyway, when you attach events in jQuery manner $("").click (or other event) you declare that all elements that fit the selector condition are subscribed to the event.

Answer 4

Mostly you can apply functions at once: $("...").someting();

You can also try: $("...").each(function() { $(this).something(); });

Answer 5

You could write a simple extension method to do what you want, like this:

jQuery.fn.ifCount = function(count) {
  return this.length === count ? this : $();
};

Then in your code instead of an if each time, you could just call this in the chain, for example:

$("div").ifCount(2).css({ color: 'red' });

If the count is 2, then the set gets carried on and .css() runs on the elements. If the count is anything but 2, a new empty set is returned, so the .css() runs on nothing.

---

If you want to just bind to any number of elements and don't care about how many, it's not necessary to check anything, you can simply do:

$("div").click(function() { .... });

This works if there's 0, 1, or 400 <div> elements, it doesn't matter. jQuery's default behavior is to just continue the chain with the matching elements...if there are 0 the functions in the chain simply execute on no elements, but it doesn't throw an error. This isn't specific to event handlers either, it works with any jQuery code (and plugins that are written correctly).