備忘録: jQueryで配列を処理する

Simplicity公式のトピックにて、グローバルナビのアイテムを別窓で開かせたいと言うのがありまして、そのレスにjQueryなどでリンクにtargetを入れれば良いという解答はあったものの、サンプルがなかったのでそれを作っていた時の話です。

targetを入れるためには、

と、特に難しくもなくイケたわけです。それ自体は何にも配列とか関係ないんですが、実際にtarget=”_blank”がそのリンクに入っているかを確かめる方法を考えていた時、あれ?どうやって表示する?って話になりました。

サンプルで作成したhtmlの3つ目のliの中のアンカーにtarget=”_blank”を入れる

このように配置された構造の3つ目にtarget=”_blank”を入れるためには、先ほどのjQueryを利用して、

このようにすれば、navの中にあるliの内、3つ目の要素の中にあるaに対して、attrでtargetに_blankをつけると言うようなことができます。

で、最初は色々やっていたもののうまく各liの中のaがどうなっているかをどのように出力したら良いかパッと思いつかずに、それならcssで色を付けるかと思ったわけです。

CSSでやるには、

このようにすることで、target=”_blank”の時に赤色のリンクになると言う感じです。しかし、実際に何かしらのアンカーに入っているかを確認するためにはやはり、html自体を書き出すほうが良いということで色々考えていたんですが、どうやってhtmlに書き出すかを考えさせられました。

例えば、

とすれば、aのオブジェクトが拾えるのは何となしに思いつきます。うまくアンカーが拾えたとして、

としてしまうと、サンプルのリストは5つのliがあるので、5つ目のliの中のアンカーの構造がそのまま出力されるだけです。つまり、普通のリンクになってしまったりするわけです。しかも、1〜4は表示されず最後の5つ目のリンクだけが表示されるんです。
append()がダメならtext()ならどうだとやってみたところ、<a href=”#” >テスト5</a>と表示されるだけ。

text()で表示している分は、まさにそれが欲しいわけですが、1〜4はどうなった?と言うことになり、おそらく順番に出力しているんでしょうけれども、同じ部分に重ねてと言うか書いては消して書いてみたいな感じになってるんだろうと思うわけです。

そこで配列をいじくることにしたわけです。

jQueryで配列をいじくる

配列自体は、何かしらの入れ物(変数)に対してそれが配列ですよと宣言します。例えば、var str = []; とか、var str = new Array(); など。
特に連想配列にするわけではないのであれば、str.push(…)で配列に入れることができます。

今回の場合、nav ul liをそれぞれに読み込んでその中にあるaのhtmlを読み込み、array.pushで配列に一旦格納して、その後で配列を展開することでなんとかしてみようという感じにしてみました。

例えばこのようにして、各liの中のaを拾います。console.logでeachがどういうものを拾っているかを見てみると(console.log( $(this) )で調べます)、outerHTMLがタグ全容を拾ってくれているようです。そこから、配列に入れるためにresult.push( $(this)[0].outerHTML );このような書き方をしています。ちなみに上記では、functionの引数にi, valueとありますが特別何かしらを操作しないのであれば必要ありません。

何かしらの操作とは、例えば2つ目の要素には何とかとか、偶数なら、奇数ならとか、例えば値がxxxであればなどの条件で出力を変えたり加工したりする場合などです。

そうすると、resultには、

このように配列が入ります。

これらのアドレスを配列に入れられた所で、それを文字列として出力するのにあたって、以下のように書きます。

元々class=”mes”のブロックには、ulが入れてあるので、liの中に何かしらのテキストを入れて.mes ulに入れられたら良い感じになります。この場合のテキストが先ほど作った配列の中身という感じになるわけです。

このようにしてできあがったのが以下になります。

これにより、タグの内容がリスト表示されるので実際にどういった内容になっているかの確認が取れます。
まぁ、ブラウザのweb開発環境で見ればすぐなんですけどね。何かしらのテストなどで吐き出している内容を確認したい時などに、もしかしたら使えるかも知れません。

スポンサーリンク

シェアする

フォローする