Django for loop list with jquery and javascript

Question

Problem: I want to display only the result for one <li> element, not for all of them.

If you have any questions please do ask.

Javascript:

function func1(i){
  $('el[i] ~ span#showOrNo').css({'display':''}); //doesn't work
  //$('span#showOrNo').css({'display':''}); this works, but displays all elements
}

function func2(i){
  $('el[i] ~ span#showOrNo').css({'display':'none'});
  //$('span#showOrNo').css({'display':'none'});
}

var el = $('li');
for(var i = 0; i < el.length; i++){
  el[i].addEventListener('mouseover', function(){
    func1(i);
  }, false);
  el[i].addEventListener('mouseout', function(){
    func2(i);
  }, false);
}

Html:

{% for song in songs %}
  <li>
    <div>
      <span>{{ song.name }}-{{ song.artist }}</span>
      <div id="showOrNo", style='display:none'>
        {% if song.attr %}
        <span>{{ song.attr }}</span>
        {% else %}
        <span>{{ song.change }}</span>
        {% endif %}
      </div>
    </div>
  </li>

So... you want to show only the LI that gets clicked... is that it? — dylrei
– dylrei, Commented Feb 17, 2015 at 21:12
You know that you are using the same id for every li, don't you? — Selcuk
– Selcuk, Commented Feb 17, 2015 at 21:17
@Selcuk How? I am incrementing i. Sorry if it's a noob question. I just started with js. — Igor Pejic
– Igor Pejic, Commented Feb 18, 2015 at 6:14
@dylrei I want to show the div showOrNo for just that li that gets hovered on. — Igor Pejic
– Igor Pejic, Commented Feb 18, 2015 at 6:16

Selcuk · Accepted Answer · 2015-02-18 12:16:25Z

1

You have to use unique ids in your HTML but you don't need to bind your event to a specific id in this case. Try this:

HTML:

<li>
<div>
  <span>{{ song.name }}-{{ song.artist }}</span>
  <div class="showOrNo" style='display:none'>
    {% if song.attr %}
    <span>{{ song.attr }}</span>
    {% else %}
    <span>{{ song.change }}</span>
    {% endif %}
  </div>
</div>

And in your JS, use a class selector:

function func1() {
    $(this).find('div.showOrNo').css({'display':''});
}

function func2() {
    $(this).find('div.showOrNo').css({'display':'none'});
}

$('li').on('mouseover', func1);
$('li').on('mouseout', func2);

This will bind every li in your HTML document and when you mouseover/out, it will find the first div with a class containing showOrNo. You can see the result here: http://jsfiddle.net/7qx5ge9m/1/

edited Feb 18, 2015 at 12:16

answered Feb 18, 2015 at 7:41

Selcuk

60.1k12 gold badges114 silver badges119 bronze badges

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

1 Comment

Igor Pejic Over a year ago

Works now. Thank you. Jquery for the win!

Collectives™ on Stack Overflow

Django for loop list with jquery and javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related