javascript equivalent of jquery for this function

Question

In a dinamically generated "ol" :

document.getElementsByTagName('ol');
    for (i = 0; i < len; i++){
          var newLi = document.createElement("li");
          var link = document.createElement('a');
          link.href = "#"; 
          link.innerHTML = (results.rows.item(i).location + "-" + results.rows.item(i).datte);
          newLi.appendChild(link);
          olnew[0].appendChild(newLi);

i need find the "li" clicked, i use jquery library only for this function, i am searching for the same functionality in javascript, but at momento i have not idea how i can code it. thx var ss; ss=$("#idfromOl"); ss.click(clickhecho);

}

function clickhecho()
{
    var $all_lis = $('li');

    $all_lis.on('click', function() {
        var index = $all_lis.index(this);
    });
}

R. Oosterholt · Accepted Answer · 2013-10-18 11:30:49Z

1

try this:

function createfunc(i) {
    return function() { alert(i); };
}
for (i = 0; i < len; i++){
    var newLi = document.createElement("li");
    var link = document.createElement('a');
    link.href = "#"; 
    link.innerHTML ="test"
    newLi.appendChild(link);
    // just add onclick event; use createFunc to create function closure (otherwise 'i' would always be the last 'i'
    newLi.onclick = createfunc(i);

    olnew[0].appendChild(newLi);
}

answered Oct 18, 2013 at 11:30

R. Oosterholt

8,2003 gold badges56 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gurrumo Over a year ago

it work fine, thx. not sense use a jquery library for 4 lines of javascript

lt.kraken · Accepted Answer · 2013-10-18 11:24:26Z

0

I might be mistaken, but is this what you are looking for?

var elements = document.getElementsByTagName('li');

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function (e) {
        $("#clickedLi").text(e.srcElement.id);
    });
}

It appends an event called addEventListener to every li element.

Inside each li element there is an click event given as a parameter which contains the id of the li clicked.

demo: http://jsfiddle.net/DUzMc/1/

answered Oct 18, 2013 at 11:24

lt.kraken

1,3003 gold badges10 silver badges27 bronze badges

2 Comments

aalku Over a year ago

It seems user2764662 is trying to avoid jquery.

lt.kraken Over a year ago

It's not jquery, exept for the text() function, but thats not what he'll use, his question was how to determine which li was clicked using nothing but javascript. The text() is only used to display the id into an textbox which is created into the example.

aleation · Accepted Answer · 2013-10-18 11:36:53Z

0

Your first part of script is incomplete, so I did a short script to generate a dynamic list.

Basicly you were looking for addEventListener():

var elements = 10;
ol = document.createElement('ol');
for(i = 1; i <= elements; i++){
    var li = document.createElement('li');
    var a = document.createElement('a');
    a.setAttribute('href', '#');
    a.text = 'Link ' + i;
    li.appendChild(a);
    ol.appendChild(li);

    a.addEventListener("click", who, false); // THIS IS THE IMPORTANT PART
}

document.getElementsByTagName('body')[0].appendChild(ol);


function who(e){
    var myTarget = e.target;
    myTarget.text = "clicked!";
}

answered Oct 18, 2013 at 11:36

aleation

4,8341 gold badge23 silver badges35 bronze badges

Comments

aalku · Accepted Answer · 2013-10-18 11:45:20Z

0

The easiest way is to include the event while generating the list:

document.getElementsByTagName('ol');
for (i = 0; i < len; i++){
      var newLi = document.createElement("li");
      var link = document.createElement('a');
      link.href = "#"; 
      link.innerHTML = (results.rows.item(i).location + "-" + results.rows.item(i).datte);

      // Add this
      link.onclick = function(index) { return function() {
        // do something with index variable
      }}(i);

      newLi.appendChild(link);
      olnew[0].appendChild(newLi);

Note I use a local variable index instead of i, this is because when the item is clicked the value of i will be different (equal to len).

edited Oct 18, 2013 at 11:45

answered Oct 18, 2013 at 11:31

aalku

2,8783 gold badges24 silver badges44 bronze badges

1 Comment

R. Oosterholt Over a year ago

Will not work because of closure issue: 'i' would always be the same (last loop value).

Collectives™ on Stack Overflow

javascript equivalent of jquery for this function

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related