Using the jQuery selectors recursively?

Question

Consider the following JavaScript:

function checkAvailability(o) {
    o = $(o);
    var p = $(o[0].parentNode);

    if (!o.val()) {
        return;
    }

    p.children('name=ajaxState').attr('src', '/images/busy.gif');

which is attempting to leverage the following HTML:

<div>
  <image name="ajaxState"
         src="/images/blank1616.png"
         style="float: right; width: 24px; height: 24px; margin-right: 1em;" />
  <input name="displayname" id="displayname" type="text"
         placeholder="Display Name"
         check-length min="1" max="45"
         onblur="checkAvailability(this);" />
</div>

where o is a wrapped input element, and p is a wrapped div element. What I want to do is get at the image element named ajaxState inside the div element, but that JavaScript throws:

Error: Syntax error, unrecognized expression: name=ajaxState

How can I use the same selector syntax to get at child elements here?

Answer 1

name=ajaxState is the attribute equals selector , it should be enclosed within []

p.children('[name=ajaxState]').attr('src', '/images/busy.gif');

It can be simplified a little to

function checkAvailability(o) {
    o = $(o);

    if (!o.val()) {
        return;
    }

    var p = o.parent()
    p.children('[name=ajaxState]').attr('src', '/images/busy.gif');