階層要素の選択

Question

こんにちはアイム関連タグで初心者、

は、私が参照として使用：

<div class="pager"> 
    <br /> 
    <div class="myjsp-prev-next" style="text-align:inherit;"> 
     <span class="myjsp-prev"><a href="{url}">Prev</a></span> 
     <span class="myjsp-next"><a href="{url}">Next</a></span> 
    </div> 
</div> 
<br /> 

Javascriptを：私はこのHTMLを持って​​

：

$(function() { 
    $(document).keyup(function(e) { 
     switch (e.keyCode) { 
      case 37: 

       var x = document.querySelectorAll(".myjsp-prev"); 

       window.location = x.attr('href'); 

       break; 
      case 39: 
       window.location = $('span.myjsp-next a').attr('href'); 
       break; 
     } 
    }); 
}); 

私はJQUERYのAPIを読んでいましたが、 querySelectorを使用して、そのクラスの要素を選択し、次または前のURLに移動します。

私はJQUERYの階層ページを読んでいましたが、何が間違っているのか分かりません。前もって感謝します。

EDIT： 私は追加してみました：

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<script type="text/javascript"> 

$(function() { 
$(document).keyup(function(e) { 
switch (e.keyCode) { 
    case 37: 
var x = document.querySelectorAll(".myjsp-prev a")[0]; 
var href = x.getAttribute('href'); 
    window.location = x.attr('href'); 
    break; 
    case 39: 
var y = document.querySelectorAll(".myjsp-next a")[0]; 
var href = y.getAttribute('href'); 
    window.location = y.attr('href'); 
    break; 
    } 
    }); 
}); 

</script> 

私は、コンソールログでエラーを取得する：
キャッチされない例外TypeError：x.attrではない：y.attrは

がキャッチされない例外TypeError関数ではありません関数

私もeq（x）とeq（y）を試しましたが、まだ動作しません。ありがとうございました。

編集： 私は今私が欲しいものを知っていると思う。基本的には：ページを表示する場所のための

<div id="mjsp-menu-select" style="float:right"> 
<select onchange="navigateTo(this, 'window');"> 
<option value="/example/example">Page 1</option> 
<option value="/example/example?start=1" selected="selected">2</option> 
<option value="/example/example?start=2">3</option> 
<option value="/example/example?start=3">4</option> 
<option value="/example/example?start=4">5</option> 
<option value="/example/example?start=5">6</option> 
<option value="/example/example?start=6">7</option> 
<option value="/example/example?showall=1"> All Pages</option> 
</select> 
</div> 

このHTML：：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="pager"> 
    <br /> 
    <div class="myjsp-prev-next" style="text-align:inherit;"> 
    <span class="myjsp-prev"><a href="{url-prev}">Prev</a></span> 
    <span class="myjsp-next"><a href="{url-next}">Next</a></span> 
    </div> 
</div> 
<br /> 

そして、このJavascriptを：

私はHTML selecterこのオプション持っている現在

$(function() { 


document.querySelectorAll("#mjsp-menu-select option").length; 

    $(document).keyup(function(e) { 
    switch (e.keyCode) { 
     case 37: 
     var x = document.querySelectorAll(".myjsp-prev a")[0]; 
     var href = x.getAttribute('href'); 
     window.location = x; 
     break; 
     case 39: 
     var y = document.querySelectorAll('.myjsp-next a')[0]; 
     var href = x.getAttribute('href'); 
     window.location = y; 
     break; 
    } 
    }); 
}); 

を、私は前に移動する矢印キーを使用することができますが、私は次へ行くことはできません。

私は、オプションセレクタにいくつの要素があるかを調べ、そのURLをstart = 1、start = 2などを付加した配列に格納する方法を見つけようとしていますオプションセレクタで選択可能なURLの量

EDIT：

NVM私はそれを考え出した： を私はあなたがJavaScriptのクエリーセレクタで、次のように使用することができ、Xの代わりに第二の場合に、yの...

Answer 1

を持っていました。

var x = document.querySelectorAll(".myjsp-prev a")[0]; 
var href = x.getAttribute('href'); 

$(function() { 
 
    $(document).keyup(function(e) { 
 
    switch (e.keyCode) { 
 
     case 37: 
 
     var x = document.querySelectorAll(".myjsp-prev a")[0]; 
 
     console.log(x.getAttribute('href')); 
 
     //window.location = x.attr('href'); 
 
     break; 
 
     case 39: 
 
     var y = document.querySelectorAll('.myjsp-next a')[0]; 
 
     console.log(y.getAttribute('href')); 
 
     //window.location = y.attr('href'); 
 
     break; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="pager"> 
 
    <br /> 
 
    <div class="myjsp-prev-next" style="text-align:inherit;"> 
 
    <span class="myjsp-prev"><a href="{url-prev}">Prev</a></span> 
 
    <span class="myjsp-next"><a href="{url-next}">Next</a></span> 
 
    </div> 
 
</div> 
 
<br />