Question

我添加了一些不属于标准HTML输入元素的输入元素。例如，我有一个“精确图像”，您可以通过点击它来放置“引脚”。此图像由一些HTML代码定义，如下所示：

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

问题在于我不能将这个新项目视为jQuery：输入如<input>，<textarea>或<select>。我想知道是否有可能在jQuery：input集中添加dinamically div.pinpoint以便我可以运行：

$(":input").hide()

隐藏所有输入，包括我的精确图像。

Answer 1

测试标记的正则表达式在闭包中定义为变量，因此如果不修改jQuery就无法更改它们，这将是一个非常糟糕的主意。

更重要的是，依赖于:input选择器的现有或未来代码可能非常合理地依赖于它通常的内容。打破他们的假设似乎是另一个坏主意。

但是你有干净的解决方法。

例如，您可以定义字符串const：

var inputs = ':input,.pinpoint';

允许你这样做

$(inputs).hide()

Answer 2

由于@dystroy提到更改jQuery源通常不是一个好主意，您可以使用IDE的查找和替换功能来更改所有选择器。但是，如果您有合理的需要更改选择器，则可以操作源。 jQuery使用sizzle引擎来选择元素，你可以修改:input selector：

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

IE8及以下版本不支持Array.prototype.indexOf。

Answer 3

感谢the link @RajaprabhuAravindasamy发表评论并经过一些研究后，我发现如何通过重载:input选择器来实现这一目标：

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

另一个知道哪些是默认的伪类选择器表达式的有趣链接是this，您可以在其中找到我用于更新自定义:input选择器的列表：

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)}

是否可以动态添加一个新的：输入到jQuery？

3 个答案: