How to use jQuery to hide / show specific divs on hover?

Question

I have a list of links embedded in <ul>, since

<ul class="list">
    <li id="1"><a href="url1">Result 1</a></li>
    <li id="2"><a href="url2">Result 2</a></li>
    <li id="3"><a href="url3">Result 3</a></li>
    <li id="4"><a href="url4">Result 4</a></li>
</ul>

And I have another one <ul>that displays information that comes with a list of results:

<ul class="summary">
    <li id="1"><p>Result 1 Info</p></li>
    <li id="2"><p>Result 2 Info</p></li>
    <li id="3"><p>Result 3 Info</p></li>
    <li id="4"><p>Result 4 Info</p></li>
</ul>

How can I do this where I can hover over a list liand it only lidisplays which is displayed with the corresponding lihover? This is my jQuery code:

$("ul.summary li").hide();
$("ul.summary li:first-child").show();

$("ul.lsit li").hover(function(){
    var id = $(this).attr("id");
    $("ul.summary li#"+id).show();
})

Answer 1

idmust be unique. Instead, you can do something like this with , and eq() index() siblings()

$("ul.summary li").hide();
$("ul.summary li:first-child").show();

$('ul.list li').hover(function() {
  $('ul.summary li').eq($(this).index())
    // using eq() you can select element using index
    // index() returns index based on it siblings
    .show()
    //show element using show()
    .siblings().hide();
    // use siblings() to get all siblings and hide them using hide()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list">
  <li><a href="url1">Result 1</a>
  </li>
  <li><a href="url2">Result 2</a>
  </li>
  <li><a href="url3">Result 3</a>
  </li>
  <li><a href="url4">Result 4</a>
  </li>
</ul>
<ul class="summary">
  <li>
    <p>Result 1 Info</p>
  </li>
  <li>
    <p>Result 2 Info</p>
  </li>
  <li>
    <p>Result 3 Info</p>
  </li>
  <li>
    <p>Result 4 Info</p>
  </li>
</ul>

Run codeHide result

UPDATE: , - -

$("ul.summary li").hide();
$("ul.summary li:first-child").show();

$('ul.list li').hover(function() {
  $('ul.summary li').eq($(this).data('target'))
    // using eq() you can select element using index
    // get custom attribute value using data()
    .show()
    //show element using show()
    .siblings().hide();
    // use siblings() to get all siblings and hide them using hide()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list">
  <li data-target=3><a href="url1">Result 1</a>
  </li>
  <li data-target=2><a href="url2">Result 2</a>
  </li>
  <li data-target=1><a href="url3">Result 3</a>
  </li>
  <li data-target=0><a href="url4">Result 4</a>
  </li>
</ul>
<ul class="summary">
  <li>
    <p>Result 1 Info</p>
  </li>
  <li>
    <p>Result 2 Info</p>
  </li>
  <li>
    <p>Result 3 Info</p>
  </li>
  <li>
    <p>Result 4 Info</p>
  </li>
</ul>

Hide result