CODEWITHSUNDEEP
jquery
Ivan
Ivan

Reputation: 15922

Is possible to add dynamically a new :input to jQuery?

I have added some input elements that are not part of the standard HTML input elements. For example, I have a "pinpoint image" where you can put "pins" by clicking on it. This image is defined by some HTML code like this:

<div class="pinpoint">
    <img src="..." alt="" title="" maxpins="10" />
</div>

The problem is that I cannot consider this new item as an jQuery :input like an <input>, <textarea> or <select>. I'm wondering if there is possible to add dinamically div.pinpoint to the jQuery :input set so I can run:

$(":input").hide()

to hide all inputs, including my pinpoint image.

Upvotes: 0

Views: 58

Answers (3)

Ivan
Ivan

Reputation: 15922

Thanks to the link @RajaprabhuAravindasamy has published in a comment and after some research, I've found how to do this by overloading the :input selector:

$.extend($.expr[':'], {
    input: function(elem) {
        return /input|select|textarea|button/i.test(elem.nodeName) || 
               $(elem).is('div.pinpoint');
    }
});

Another interesting link to know which are the default pseudo-class selector expressions is this where you can find this list that I've used to update my custom :input selector:

animated=function (a){return c.grep(c.timers,function(b){return a===b.elem}).length}
button=function (g){return"button"===g.type||g.nodeName.toLowerCase()==="button"}
checkbox=function (g){return"checkbox"===
g.type}
checked=function (g){return g.checked===true}
disabled=function (g){return g.disabled===true}
empty=function (g){return!g.firstChild}
enabled=function (g){return g.disabled===false&&g.type!=="hidden"}
file=function (g){return"file"===g.type}
has=function (g,h,k){return!!o(k[3],g).length}
header=function (g){return/h\d/i.test(g.nodeName)}
hidden=function (a){var b=a.offsetWidth,d=a.offsetHeight,f=a.nodeName.toLowerCase()==="tr";return b===0&&d===0&&!f?true:b>0&&d>0&&!f?false:c.curCSS(a,"display")==="none"}
image=function (g){return"image"===g.type}
input=function (g){return/input|select|textarea|button/i.test(g.nodeName)}
parent=function (g){return!!g.firstChild}
password=function (g){return"password"===g.type}
radio=function (g){return"radio"===g.type}
reset=function (g){return"reset"===g.type}
selected=function (g){return g.selected===true}
submit=function (g){return"submit"===g.type}
text=function (g){return"text"===g.type}
visible=function (a){return!c.expr.filters.hidden(a)}

Upvotes: 0

Ram
Ram

Reputation: 144689

As @dystroy mentions changing the jQuery source is not usually a good idea, you can use the find and replace ability of your IDE for changing all the selectors. However if you have a reasonable need for changing the selector, you can manipulate the source. jQuery uses sizzle engine for selecting the elements, you can modify the :input selector:

"input": function( elem ) {
            return rinputs.test( elem.nodeName ) 
     /* + */       || elem.className.split(' ').indexOf('pinpoint') > -1
     /* +          && elem.nodeName.toLowerCase() === 'div'; */ 
},

The Array.prototype.indexOf is not supported by IE8 and below.

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382150

The regular expressions testing the tags are defined as vars in the closure so you can't change them without modifying jQuery, which would be an incredibly bad idea.

And, more importantly, existing or future code relying on the :input selector may very legitimately rely on what it normally is. It looks like another bad idea to break their assumption.

But you have clean workarounds.

For example, you can define a string const :

var inputs = ':input,.pinpoint';

allowing you to do

$(inputs).hide()

Upvotes: 1

Related Questions