0

jqueryのeach

使いそうで使ってなかったjqueyのeach関数。
下記のようにDOMをループしてリンク先を全て変更したい時等に使います。

<ul class="clearfix">
<li><a href="link1.html">リンク1</a></li>
<li><a href="link2.html">リンク2</a></li>
<li><a href="link3.html">リンク3</a></li>
<li><a href="link4.html">リンク4</a></li>
<li><a href="link5.html">リンク5</a></li>
</ul>

$(document).ready(function(){
j$("ul li a").each(function(i){
var url = j$(this).attr('href');
url = url + '\?ref=blog';
j$(this).attr('href', url);
});
});

するとページがロードされるとこんな感じに代わります。
<ul class="clearfix">
<li><a href="link1.html?ref=blog">リンク1</a></li>
<li><a href="link2.html?ref=blog">リンク2</a></li>
<li><a href="link3.html?ref=blog">リンク3</a></li>
<li><a href="link4.html?ref=blog">リンク4</a></li>
<li><a href="link5.html?ref=blog">リンク5</a></li>
</ul>

実際jsでリンクを変更って余り使わないだろうけど、classを変更したい時はテキストを変更したい時に使えます。

jsでインターフェイスの幅が広がったと思うけど、本当のユーザビリティーってなんだろうと思う。
「直感」で分かるインターフェイスはもちろん重要。
しかし、

  • ユーザーは「次へ」をクリックするとページ遷移することに慣れてしてまってる。
  • 開発者はユーザービリティを考慮してページ遷移させずにajaxで次ページを表示する。
    で、ブラウザの戻るをクリックするとユーザーが望んでるページに戻らない。

開発者や制作会社なんかは後者を意識しがちだけど、ユーザーの慣れとか体験っていうのを無視してしまうのは、本来のユーザビリティっての無視してる気がする。
後進的と言われようと、そこは重要なところ。

大阪のWEB屋です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です