CODEWITHSUNDEEP
javascriptjquery
Ajay Patel
Ajay Patel

Reputation: 5418

jQuery hide record title if record not found

I have one list of entries, and these entry shorted by alphabetically, now I want to display My Entry & Other Entry by clicking on button.

In this code suppose I have one button on click that I want to show My Entry (see class="class_my") with class="item" & class="title". I can do this but in second case(id="h") have no class="class_my", for that I do not want to display anything (class="item" & class="title")

<li id="g" class="item">
<a name="g" class="title">G</a>
   <ul>
       <li>                   
       <a href="?page_id=242&amp;fid=9&amp;entry=due7ya" class="class_other">Grovy Roy</a>
       <a href="?page_id=242&amp;fid=9&amp;entry=due7ya" class="class_my">Gova Patel</a>
       </li>
   </ul>
</li>
<li id="h" class="item">
    <a name="h" class="title">H</a>
       <ul>
           <li>                   
           <a href="?page_id=242&amp;fid=9&amp;entry=due7ya" class="class_other">Honey Roy</a>

           </li>
       </ul>
    </li>

Thanks in Advance!

Upvotes: 1

Views: 175

Answers (3)

Humayoo
Humayoo

Reputation: 690

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>StatockOverflow</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.class_my').hide();
            $('.class_my').parent().hide();
            $('.class_other').hide();
            $('.class_other').parent().hide();
        })
    function showanchor(obj) {


        if ($($(obj).parent()).children("ul").children("li").children('a.class_my').length > 0)
            $($(obj).parent()).children("ul").children("li").show();
        $($(obj).parent()).children("ul").children("li").children('a.class_my').show();


        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ul>
    <li id="g" class="item">
    <a name="g" href="javascript:void(0);" class="title" onclick="showanchor(this);">G</a>
   <ul>
       <li>                   
       <a href="?page_id=242&amp;fid=9&amp;entry=due7ya" class="class_other">Grovy Roy</a>
       <a href="?page_id=242&amp;fid=9&amp;entry=due7ya" class="class_my">Gova Patel</a>
       </li>
   </ul>
</li>
<li id="h" class="item">
    <a name="h" href="javascript:void(0);" class="title" onclick="showanchor(this);">H</a>
       <ul>
           <li>                   
           <a href="?page_id=242&amp;fid=9&amp;entry=due7ya" class="class_other">Honey Roy</a>
           <a href="?page_id=242&amp;fid=9&amp;entry=due7ya" class="class_my">Gova Patels</a>

           </li>
       </ul>
    </li>
    </ul>
    </div>
    </form>
</body>
</html>

Upvotes: 1

mgibsonbr
mgibsonbr

Reputation: 22007

If I understood correctly, all items will be hidden initially, and when your click "My Entry" you want to show items that have one item .class_my inside them. Same with "Other Entry". Is that correct?

I'd suggest looking for the class, then using closest to find the parent item:

$(".item").hide(); // All them are hidden in the beginning
$("#my_button").click(function() {
    $(".class_my").closest(".item").show();
});

If that's not what you're trying to achieve, please clarify (edit your question with more info). Show also what you've tried so far, so we can help you spot what's going wrong.

Update: if all items are shown in the beginning, and the button will hide some of them, move the "hide all" to inside your function:

$("#my_button").click(function() {
    $(".item").hide(); // Hide all them, and...
    $(".class_my").closest(".item").show(); // ...show only the ones you want.
});

Upvotes: 2

Đorđe Zeljić
Đorđe Zeljić

Reputation: 1825

Try with this code. (btn is your button).

btn.click(function(){
    $('.class_my').closest('.item').show();
});

Upvotes: 1

Related Questions