Home/ Questions/Q 5970979
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T20:27:08+00:00

I would like to select list items based on their incrementing ID’s but I

  • 0

I would like to select list items based on their incrementing ID’s but I am having a bit of trouble. Thoughts? 

$(document).ready(function () {

    var listCount = 1;

    $('#listitem-' + listCount + ' a').hover(function() {
            $('#anotheritem-' + listCount).show();
            return false;
    });

    listCount++;
});

HTML:

<ul id="cap">
   <li id="listitem-1"><a href="#">content 1</a></li>
   <li id="listitem-2"><a href="#">content 2</a></li>
   <li id="listitem-3"><a href="#">content 3</a></li>
   <li id="listitem-4"><a href="#">content 4</a></li>
</ul>
<div style="display:none;" id="anotheritem-1">hello 1</div>
<div style="display:none;" id="anotheritem-3">hello 3</div>
<div style="display:none;" id="anotheritem-3">hello 3</div>
<div style="display:none;" id="anotheritem-4">hello 4</div>

UPDATED Question. I’m trying to achieve the following revision of the answer:

$('.listitem_to_hover').hover(function () { 
    var senderID = sender.id.replace('listitem-', '');
     $('#anotheritem-' + senderID).show();
}, function () { 
    var senderID = sender.id.replace('listitem-', '');
     $('#anotheritem-' + senderID).hide();
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    So, you are looping through (or trying to loop through) to assign your hover function, why not use a class selector instead:

    //changing # to . makes jquery select ALL of the elements with that class assigned.

$('.listitem_to_hover').hover(function() {
    $(this).toggleClass('current');
return false;
});

    HTML:

    <ul id="cap">
   <li id="listitem-1" class="listitem_to_hover"><a href="#">content 1</a></li>
   <li id="listitem-2" class="listitem_to_hover"><a href="#">content 2</a></li>
   <li id="listitem-3" class="listitem_to_hover"><a href="#">content 3</a></li>
   <li id="listitem-4" class="listitem_to_hover"><a href="#">content 4</a></li>
</ul>

    ps: even after you edit your document.ready… you don’t have a loop?

    *Okay, based on what you have shown, this should get you want you want: *

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.listitem_to_hover').hover(function () { showItem(this); }, function () { hideItem(this); })
        });

        function showItem(sender) {
        var senderID = sender.id.replace('listitem-', '');
        $('#anotheritem-' + senderID).fadeIn();// .removeClass('hidden');
    }

    function hideItem(sender) {
        var senderID = sender.id.replace('listitem-', '');
        $('#anotheritem-' + senderID).fadeOut(); //.addClass('hidden');
    }
    </script>
    <style type="text/css">
        .hidden
        {
            display: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul id="cap">
            <li id="listitem-1" class="listitem_to_hover"><a href="#">content 1</a></li>
            <li id="listitem-2" class="listitem_to_hover"><a href="#">content 2</a></li>
            <li id="listitem-3" class="listitem_to_hover"><a href="#">content 3</a></li>
            <li id="listitem-4" class="listitem_to_hover"><a href="#">content 4</a></li>
        </ul>
        <div class="hidden" id="anotheritem-1">
            hello 1</div>
        <div class="hidden" id="anotheritem-2">
            hello 2</div>
        <div class="hidden" id="anotheritem-3">
            hello 3</div>
        <div class="hidden" id="anotheritem-4">
            hello 4</div>
    </div>
    </form>
</body>
</html>
    • 0