How to access this list element with jQuery

Question

I'm not sure how to access this element with jQuery.

When the user hovers over the link inside the image, I want the class hidden to be removed.

This is just one list menu item of many, so I need a way to do it with $this

<ul class="menu">
    <li>
        <ul>
            <li class="hidden">
                <div class="container">
                    <div class="one"></div>
                    <div class="two"></div>
                    <div class="three"></div>
                    <div class="four"></div>
                    <div class="five"></div>
                    <div class="six"></div>
                </div>
            </li>
            <li>
                <img src="images/sample.svg" /><a href="#">Sample</a>
            </li>
        </ul>
    </li>
</ul

In vain I tried:

$('.menu>li>ul>li:last-child>img>a').hover(function() {
    $(this).parent().parent().child().removeClass('hidden');
}, function() {
    $(this).parent().parent().child().addClass('hidden');
});

AmmarCSE · Accepted Answer · 2015-06-24 20:07:06Z

2

Use closest() and prev()

$('.menu [href]').hover(function() {
  $(this).closest('li').prev('li').removeClass('hidden');
}, function() {
  $(this).closest('li').prev('li').addClass('hidden');
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul class="menu">
  <li>
    <ul>
      <li class="hidden">
        <div class="container">
          <div class="one"></div>
          <div class="two"></div>
          <div class="three"></div>
          <div class="four"></div>
          <div class="five"></div>
          <div class="six"></div>
        </div>
      </li>
      <li>
        <img src="images/sample.svg" /><a href="#">Sample</a>
      </li>
    </ul>
  </li>
</ul>

edited Jun 24, 2015 at 20:07

answered Jun 24, 2015 at 20:02

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

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

4 Comments

Collin Graves Over a year ago

I think something like $('.menu').find('[href]').hover(function() {...}); would work better, for a more explicit location for the href. Do you guys agree?

AmmarCSE Over a year ago

@Ted, honestly I did not see your answer until after I posted. When I was typing out my answer, you know how it is, it just shows a gray bar with '1 answer has been submitted`

Ted Over a year ago

@AmmarCSE lol no worries. I removed mine since there's no need for duplicates, and your answer has better explanations :)

Ted Over a year ago

@CollinGraves -- no doubt, I just used the OP's assuming there was a good reason for it, but there may not have been a good reason for it.

Collin Graves · Accepted Answer · 2015-06-24 20:03:57Z

0

$('.menu').find('[href]').hover(function(){
  $(this).closest('li').prev('li').removeClass('hidden');
  }, function(){
  $(this).closest('li').prev('li').addClass('hidden');
  });

answered Jun 24, 2015 at 20:03

Collin Graves

2,27716 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to access this list element with jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related