Roys Roys - 5 months ago 12
Javascript Question

Hierarchy Element Selection by Class for Window and Attr url

Hello I'm a beginner in related tags,

I used as reference: Bind Keyboard to left/right navigation

I have this HTML:

<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:

$(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;
}
});
});


I was reading the API for JQUERY and wanted to try to use the querySelector to select the elements with that class and then go to the next or prev url.

I was reading the hierarchy page for JQUERY and I'm not sure what is wrong. Thanks in advance.

EDIT:
I tried adding:

<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>


I get the error in console log:

Uncaught TypeError: y.attr is not a function

Uncaught TypeError: x.attr is not a function

I also tried eq(x) and eq(y), but still doesn't work. Thank you.

EDIT:
Okay so I think I know what I want now. Basically:


I have this option selecter HTML:

<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>


This HTML for where to show the page:

<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 />


And this Javascript:

$(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;
}
});
});


Currently, I can use the arrow keys to go navigate to previous, but I cannot go to the next.

I'm trying to find a way to go count how many elements there are in the option selector, and then store those URLs into an array appended with a start=1, start=2, etc. up to the max amount of url that are selectable in the option selector.

EDIT:

Nvm I figured it out:
I had x instead of a y on the second case...

Prs Prs
Answer

You could use like this with javascript query selector.

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 />

Comments