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);
//...
}
参照: