<li>タグのurlの取得について。よろしくお願い致します。

Question

いつもお世話になっております。
現在開いているページのurlと一致する<li>の文字色を変更する機能を作成しております。
下記のソースだと、クリックした<li>のurlを取得し、それの文字色を変更するという機能になってしまいます。

<li>をクリックせずに、現在のページのurlと一致する<li>の取得を行いたいのですが、知識不足で作成することが出来ませんでした。

ご教授よろしくお願い致します。

<!--HTML-->

<ul id="pageList">
      <li><a href="○○○">1</a></li>
      <li><a href="×××">2</a></li>
</ul>

//JQuery

$(document).on('click', '#pageList a', function() {
//クリックした<li>のurlを取得
	var val = $(this).attr("href");
//現在のページのurlと一致している場合
	if (window.location == val) {
		$('#pageList a[href="' + val + '"]').parent().addClass('red');
	} else
		$('#pageList a:eq(1)').parent().addClass('red');
});

Answer 1

href 属性値は相対パス参照になりますが、href プロパティを参照すれば絶対URIになります。

<ul id="pageList">
  <li><a href="aaa.html">aaa</a></li>
  <li><a href="bbb.html">bbb</a></li>
</ul>

<script type="text/javascript">
'use stirct';
jQuery('#pageList>li>a').each(function (i, a) {
  if (a.href === location.href) {
    jQuery(a.parentNode).addClass('current');
  }
});
</script>

Re: akagami_bb さん

Comments

[akagami_bb]

ご回答ありがとうございます。
下記のコメントも読ませていただきました。仰るとおりで、そのパターンを考えておりませんでした。後ほど修正を行いたいと思います。
また機会がありましたらよろしくお願い致します。

Answer 2

セレクタをうまく使うとこんなことも

var url = window.location.href;
$('#pagelist a[href="' + url + '"]').each(function(i, e){
  $(e).parent().addClass('red');
});

Answer 3

jQueryのready(fn)を利用すれば、画面が表示されたときの処理を記述できます。
http://semooh.jp/jquery/api/events/ready/fn/

$(document).ready(function(){
	$('#pageList a').each(function(){
		var val = $(this).attr("href");

		if (window.location.href == val) {
			$(this).parent().addClass('red');
		}
	});
});

一箇所、元のソースに間違いを見つけましたので、修正しています。
window.location → window.location.href

Comments

[akagami_bb]

ご回答ありがとうございます。
一度試してみたいことがあり、

$('#pageList a').each(function(){
var val = $(this).attr("href");
→ var val = $(this).attr("search");

に変更したところ、undefinedと出てしまいました。もしよろしければ、ご教授よろしくお願い致します。

・hrefには、?○○と含まれています。

[tkturbo]

aタグにsearchという属性がついてないので。。。>>akagami_bbさん

[akagami_bb]

ご回答ありがとうございます。
なるほど・・・。勉強不足でした。
ということは
linkのurl:
/sampleBoard/index.do?pageNumber=1"
現在のurl:
http://localhost:○○○○/sampleBoard/index.do?pageNumber=1

の二つを比べることは不可能でしょうか？
何度も申し訳ございません。

[rkojima]

.attr() は、指定した属性の値を取得します。
`search`という属性が存在しないので、値が取得できず undefinedとなります。

[tkturbo]

後方マッチならString.prototype.endsWith [ https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith ]を使えば比較できまっせ>>akagami_bbさん

[akagami_bb]

ご回答ありがとうございます。
上記のサイトを参考にしたところ、無事解決することが出来ました！
また機会がありましたらよろしくお願い致します。

[think49]

ちょっと意地悪ですが、String.prototype.endsWith を使った場合、
http://localhost:○○○○/hogehoge/sampleBoard/index.do?pageNumber=1
にもマッチしてしまいますね。

Answer 4

$(document).ready(function(){
    $('#pageList a').each(function(){
        var val = $(this).attr("href");
        var url = $(location).attr('href');
        if ((url.endsWith(val))) {
        	 $(this).parent().addClass('red');
        } else
    		$('#pageList a:eq(0)').parent().addClass('red');
    });
});

String.prototype.endsWith = function(suffix) {
	  var sub = this.length - suffix.length;
	  return (sub >= 0) && (this.lastIndexOf(suffix) === sub);
	};