Today I had the following problem. I had to write a function to update the text of a button. The trouble is the button in question could have either of the following two forms:

a) <button>Text</button>\\\\

b) <button><span>Text</span></button>

I had trouble coming up with an elegant and simple way cater for either variant. A user on the forums suggested:

$("button").children().andSelf().not(":has(*)").text("New Label");

which works, but is maybe not elegant or fast.

I was thinking that perhaps a new traversal function might be useful for situations like this. My suggestion is:

$("button").orChild("span").text("New Label");

For each element in the jQuery object, orChild would select the children that match the given selection string (if it exists). If no matching child is found, the existing element (ie parent) is kept.

If no parameter was supplied to orChild() then all children would be selected (if they exist).

So for

<ul>
<li>One</li>
<li><b>Two</b></li>
<li><i>Three</i></li>
</ul>

$("li")

would select three elements (the three <li>s).\\\\

$("li").orChild()

would also select three objects (<li>, <li><b>, <li><i>)\\\\

$("li").orChild("b")

would select three objects (<li>, <li><b>, <li>)

$("li").orChild().text("foo")

could be used to update the text of all three <li>s without affecting the <b> or <li>, giving:

<ul>
<li>foo</li>
<li><b>foo</b></li>
<li><i>foo</i></li>
</ul>

Perhaps as an alternative to orChild(), a more general orDescendant() might be a better choice?

Do the devs think this might be a useful addition?