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

Question

I've got a list of links embedded in a <ul> as so

<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 <ul> that displays information that goes with the results list:

<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 do I make it to where I can hover over a li in list and it only displays the li in summary that goes with the respective li hover? 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

id should be unique. Instead you can do something like this with help of eq() , index() and 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's 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>

UPDATE : If you want to change the order then you can set some custom attribute and do something like

$("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>