Applying jQuery to specific divs only?

Question

So I currently have some code that I only want to run for a specific div called #photo3. It currently works as code when I have the first line say "body", but of course, this applies the code to the entire webpage. When I tried changing the "body" to "photo3" or "#photo3", the code stopped working. How can I apply this code only for a div called #photo3?

$("body").keydown(function(e){
    // left arrow
    if ((e.keyCode || e.which) == 37)
    {   
        document.body.style.overflow='auto';document.getElementById('photo3').style.display='none';document.getElementById('fade').style.display='none';
        document.body.style.overflow='hidden';document.getElementById('photo2').style.display='block';document.getElementById('fade').style.display='block';
    }
    // right arrow
    if ((e.keyCode || e.which) == 39)
    {
        document.body.style.overflow='auto';document.getElementById('photo3').style.display='none';document.getElementById('fade').style.display='none';
        document.body.style.overflow='hidden';document.getElementById('photo').style.display='block';document.getElementById('fade').style.display='block';
    }   
});

The HTML:

<div id="fade" class="black_overlay"></div>
<div id="photo" class="photo_content"> 
   <table class="photo_table">
      <img class="photoimg" src="images/photo.jpg">
   </table>
</div>
<div id="photo2" class="photo_content"> 
   <table class="photo_table">
      <img class="photoimg" src="images/photo2.jpg">
   </table>
</div>
<div id="photo3" class="photo_content"> 
   <table class="photo_table">
      <img class="photoimg" src="images/photo-food.jpg">
   </table>
</div>

I don't see an element with id of "fade" or of "photo2". In the second part did you mean "photo2" instead of just "photo"? — Taplar, May 20 '15 at 13:04
Also usages of "document.body.style.overflow='auto';" could be changed to $('body').css('overflow', 'auto'); — Taplar, May 20 '15 at 13:05
When you try code that doesn't work, are there errors in your browser's developer tools that might point out what the issue is? — Anthony Grist, May 20 '15 at 13:07
@A.Wolff What does it mean that it is not valid HTML markup? — Jay, May 20 '15 at 13:10
That means an IMG should not be direct descendant of TABLE element. Now regarding your issue, you have to provide minimalistic sample replicating your issue — A. Wolff, May 20 '15 at 13:16

score 2 · Answer 1 · answered May 20 '15 at 12:56

2

To select a specific div you can use either $("div#photo3") or just $("#photo3").

You can also do the same with classes and few other attributes by replacing the # as required (. for class, for example).

Hope that helps!

answered May 20 '15 at 12:56

JohnHoulderUK

639
2
8
27

Do you have multiple elements using the #photo3 ID at all? – JohnHoulderUK May 20 '15 at 21:01

Applying jQuery to specific divs only?

1 Answers1