CODEWITHSUNDEEP
jquerygetelementbyid
Charlie Burger
Charlie Burger

Reputation: 11

getElementById in a ordered list

I have this in the html:

<ul class="ei-slider-arrows">
  <li id="arrowLeft" ><img src='images/close.png'/></li>
  <li id="arrowRight" ><img src='images/close.png'/></li>
</ul>

I am trying to add a click function on my two li "arrows" but I can't select them. I tried this:

this.$arrows     = this.$el.find('ul.ei-slider-arrows');
this.$arrowLR    = this.$arrows.children('li');
this.$arrowRight = this.$arrowLR.getElementById("arrowRight");

I can add a function on this.$arrowLR but I can't manage to select arrowRight. Here I tried with getElementById, but I also tried with get(0) and get(1).

Anyone has an idea why it's not working?

If I do console.log(this.$arrowRight) it only shows [] in the console in both case (get() and getElementById("arrowRight")).

Upvotes: 1

Views: 435

Answers (4)

Konrad Viltersten
Konrad Viltersten

Reputation: 39190

I'd go:

$("#leftArrow").click(hazaa());
$("#rightArrow").click(hazaa());

function hazaa(){ }

And you can also pass a parameter if you'd like to do slightly different things, depending on the arrow clicked.

$("#leftArrow").click(hazaa("left"));
$("#rightArrow").click(hazaa("right"));

function hazaa(direction){ alert(direction); }

Upvotes: 0

wirey00
wirey00

Reputation: 33661

Just select the elements by ID and bind the event handler to it

using jQuery

$('#arrowLeft').click(function(){

})

$('#arrowRight').click(function(){

})

Upvotes: 2

scrappedcola
scrappedcola

Reputation: 10572

$("#arrowRight") and $("#arrowLeft") in jquery should get you both left and right arrows. You can then use on(), delegate(), or click() to assign a handler. You could also just do document.getElementById("arrowLeft") or document.getElementById("arrowRight") to do the same selection. One of your issues above is that in this.$arrowLR.getElementById("arrowRight"); you are attempting to use a javascript function on a jquery object which contains a list of dom elements.

Upvotes: 0

Zbigniew
Zbigniew

Reputation: 27604

If you want to get them both by id then use this snippet:

var arrowsBoth = $('#arrowLeft, #arrowRight');

Or if you want to access them separately:

var arrowLeft = $('#arrowLeft');
var arrowRight = $('#arrowLeft');

You can also get them like this (also, this can possibly return more elements than desired):

var arrows = $('ul.ei-slider-arrows li');

Upvotes: 2

Related Questions