jqueryで一番近くのhidden項目の値を変更したい

Question

<form>
 <input type="hidden" name="id" value="1">
 <ul>
  <li>
   <a onclick="test();" href="#">test</a>
  </li>
  <li>
   <a onclick="test();" href="#">test2</a>
  </li>
 </ul>
</form>

上記の様なHTMLでtestのclickイベントの中で一番近くのhidden項目の値(この場合はname="id")の値を
変更したいのですが、closestではhidden項目を指定出来ないのでしょうか？

Answer 1

jQuery#closest は APIドキュメントに "For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree."
とあるように、呼び出した要素そのものか、その祖先の要素を取得する目的のために使いますので、
挙げられている例では aタグの上流に hidden要素があるわけではないので、 取得できません。

たとえば上の例だけなら、

var hdnElem = $('input:hidden', $("クリックされている要素").closest("form"));

などとすれば取れますが、
formに hidden要素がいくつもある場合は、一つにしぼれません。
もし hiddenが複数になるということであれば、どのhiddenに何を入れるかを管理するデータを作った方がいいですね。

＃ちなみに、 name属性に "id" という値を入れるのは避けた方がいいですね。 idは主要な属性名ですのですぐに混乱が起きます。

Comments

[yisland]

参考になりました。
ありがとうございます。