jqueryでナビゲーションの現在地を判定させようとしています。

質問

jqueryでナビゲーションの現在地を判定させようとしています。
下記のようなソースで、URLとa要素のhref値が一致する場合はclass="here"をつけています。

$(function(){
$("#gnavi li a").each(function(){
if($(this).attr("href")==location.href)
$(this).toggleClass("here");
});
})

しかし

http://～～.com/hoge1/　→　index.html
　　　　　　　　　　　　　　　A.html
　　　　　　　　　　　　　　　B.html

という構成だった場合、index.htmlはhereがつきますが、A、Bに移動するとhereがなくなってしまいます。
hoge1直下にあるファイルの場合どのような名前でもhereをつくようにするにはどうしたらよいのでしょうか。
よろしくお願いいたします。

回答No.4

fujillin

No1です。
補足を読んでも意味がさっぱりわからない。

locationが『http://ドメイン/hoge1/index.html』の時に、
ナビゲーションのhref属性値の　『http://ドメイン/hoge1/index.html』
と比較すると（同じなので）クラスが変更されるけれど、

locationが『http://ドメイン/hoge1/A.html』の時に、
href属性『http://ドメイン/hoge1/』のものをクラス変更したいという意味なのだろうか？
(上の比較方法では一致とみなされない）

でもそれって、リンク要素のhref属性だから、そのリンクをクリックするとフォルダ構成が表示されちゃうとか（禁止していれば出ないけど）になるので、リンクにならないと思うけれど？？

ますますわからないけれど、もしも、『http://ドメイン/hoge1/A.html』と『http://ドメイン/hoge1/』を一致とみなしたいのなら、文字列の頭から比較すればよいだけなので
var loc = location.href;
$("#gnavi li a").each(function() {
var href = $(this).attr("href");
if (loc.substr(0, href.length) == href)
$(this).toggleClass("here");
});

（↑）元のコードそのままだけど、なんでtoggleClassなのかも不明。
（一度実行してセットするだけなのでaddClassではないの？）

補足

fujillinさん、レスありがとうございます。
どうも説明がへたで申し訳ありません。

http://ドメイン/hoge1/index.html
http://ドメイン/hoge1/a.html
http://ドメイン/hoge1/b.html
という具合にhoge1フォルダーに入っているhtmlが表示されているときはhoge1ボタンにあたる「"#gnavi li a.hoge1」にhereをつける

http://ドメイン/hoge2/index.html
http://ドメイン/hoge2/c.html
http://ドメイン/hoge2/d.html
とhoge2フォルダーについている場合は「"#gnavi li a.hoge2」にhereをつける
という風にしたいと考えています。

リンクURLは「http://ドメイン/hoge1/」「http://ドメイン/hoge2/」としているので、index.htmlの場合はhrefが同じになるのでhereがつきますが、他のページに移動すると●.htmlがつくため、不一致となりhereがつきません。

そこでURL全てではなく「http://ドメイン/hoge1/」までが一致ならhereをつけるというスクリプトにならないかと試しています。

toggleClassにしているのは、hoge1にhereがついたあとにhoge2に移ったときにhoge1につけたhereを削除する必要があると思っていたのですが、元のスクリプトをaddClassにしても問題はなかったです。ご指摘ありがとうございます。

回答No.3

yyr446

完全をきすなら、

if($(this).get(0).href == document.location.protocol + '//'
+ document.location.hostname
+ document.location.pathname)

か。

補足

下記の回答とあわせてレスありがとうございます。
get()を調べておぼろげにDOMがわかりました…。

ただ今回はhttp://部分の問題ではなく、フォルダー以下のファイルではhtmlがつくことでパスが一致しなくなっています。

１）ナビゲーションのパスはhttp://ドメイン/hoge1/というようにフルパス記述。
２）フォルダーはhoge1、hoge2・・・とあり、hoge1の中にはindex.html、A.html、B.html・・・と入っている
３）hoge1/index.htmlの場合はhereがつきナビゲーションは反転する。
　　hoge1/A.htmlではhereはつかずナビゲーションは反転しない。
４）hoge1のフォルダーに入っているhtmlにアクセスする場合は「ナビゲーションhoge」にhereをつけ反転させたい。
５）htmlは今後も増える。

考えが混乱した状態で質問を投稿してしまい申し訳ございません。
http://ドメイン/hoge1/まで一致すればhereをつける前方一致のような方法があればぜひご教示いただければと思います。
よろしくお願いいたします。

回答No.2

yyr446

$(this).attr("href")でなく、DOMのHTMLインターフェースで、
$(this).get(0).hrefで取得するとフルパスになるはず。

$(function(){
$("#gnavi li a").each(function(){
if($(this).get(0).href==location.href)
$(this).toggleClass("here");
});
})

windows.location.href は
document.locationやdocument.URL、document.documentURI
でもよしかな？。

お礼

ありがとうございます。
上の回答に補足をつけさせていただきました。

回答No.1

fujillin

推測ですが…
a要素のhref属性の指定がフルパスではないので、文字列比較が＝にならないのでは？
（IEの場合は相対パスでもフルパスを返すらしいですが…）

以下のような感じではどうでしょうか？
相対パスでも「./A.html」のような指定方法をとっている場合は、さらに修正が必要と思われます。

$(function() {
　var loc = location.href;
　$("#gnavi li a").each(function() {
　　var href = $(this).attr("href");
　　if ( loc.slice(-href.length) == href)
　　　$(this).toggleClass("here");
　});
})

補足

回答ありがとうございます。
私の質問の仕方がわかりにくくて申し訳ありません。

ナビゲーションのパスはhttp://ドメイン/hoge1/というようにフルパス記述しており、index.htmlのページではhereがつきます。
同じhoge1フォルダー内にあるa.htmlやb.htmlにアクセスしたときはhoge/の後ろにHTML名がついてしまうためhereがつかないところまでは理解できています。
フォルダー内のファイルは今後も増えていくので、前方一致でhereをつけるようなことはできないでしょうか。
よろしくお願いいたします。