You should realize that jQuery works with
the HTML DOM tree in the client side. jQuery
doesn't work directly on JSF components as you've written in the
JSF source code, but jQuery works directly
with the HTML DOM tree which is generated by those
JSF components. You need to open the page in webbrowser and
rightclick and then View Source. You'll see that JSF
prepends the ID of the generated HTML input elements with the IDs
of all parent NamingContainer components (such
as , , etc) with : as default separator character. So
for example
...
生成されたHTMLに
<form id="foo" name="foo">
<input type="checkbox" id="foo:bar" name="foo:bar" />
...
代わりに正確に要素を選択する必要があります。しかし、：は擬似セレクタを表すCSS識別子の特殊文字です。
jQueryでCSSセレクタを使用してIDの：要素を選択するには、バックスラッシュでエスケープするか、
[id = ...] 属性を使用する必要がありますセレクタを使用するか、古い
getElementById（）：
var $element1 = $("#foo\\:bar");
// or
var $element2 = $("[id='foo:bar']");
// or
var $element3 = $(document.getElementById("foo:bar"));
XXX が増分番号を表すIDに自動生成された j_idXXX
の部分がある場合は、特定のコンポーネントに固定IDを与える必要があります増分数は動的であり、ツリー内のコンポーネントの物理的位置に応じて変更される可能性があります。
また、クラス名を使用することもできます。
HTMLで終わる
<input type="..." class="someClassName" />
あなたがそれを得ることができるように
var $elements = $(".someClassName");
これにより、より良い抽象化と再利用が可能になります。確かに、そのような要素はユニークではありません。
header、menu、content、footerのような主要レイアウト要素は本当にユニークですが、通常は
NamingContainer にはまだありません。
再び別の方法として、HTML DOM要素自体を関数に渡すことができます：
function someFunction(element) {
var $element = $(element);
//...
}
参照：