使用jQuery选择最接近的匹配项

Question

I am having trouble selecting the closest match. I already tried .closest , .next , and .nextall ; I also tried using (this), but I think I'm using them incorrectly.

Here's what I want to acheive: When .show is clicked, the closest .list-content will toggle and the closest toggleClass icon-rotate-180 too.

<ul class="list-unstyled">
    <li class="list-menu">
        <a href="javascript:void(0);" class="show">
            Date of Operations 
            <i class="icon-chevron-down pull-right"></i>
        </a>
    </li>
    <li class="list-content">Hidden Content until Clicked</li>

    <li class="list-menu">
        <a href="javascript:void(0);" class="show">
            Date of Operations 
            <i class="icon-chevron-down pull-right"></i>
        </a>
    </li>
    <li class="list-content">Hidden Content until Clicked</li>
</ul>

<script>
    $(document).ready(function() {
        $(".list-content").hide();
            $(".show").click(function() {
                $(".icon-chevron-down").toggleClass("icon-rotate-180");
                $(".list-content").toggle();
            });
        });
</script>

Answer 1

Firstly, your HTML is invalid as you cannot have a div element as a direct child of a ul . With that in mind, try this:

<ul class="list-unstyled">
    <li class="list-menu">
        <a href="#" class="show">
            Date of Operations 
            <i class="icon-chevron-down pull-right"></i>
        </a>
        <div class="list-content">Hidden Content until Clicked</div>
    </li>

    <li class="list-menu">
        <a href="#" class="show">
            Date of Operations 
            <i class="icon-chevron-down pull-right"></i>
        </a>
        <div class="list-content">Hidden Content until Clicked</div>
    </li>
</ul>

$(".show").click(function(e) {
    e.preventDefault();
    $(".icon-chevron-down", this).toggleClass("icon-rotate-180");
    $(".list-content", $(this).closest('li')).toggle();
});

Answer 2

1. ul / li is the wrong case here. The second li is in relation to the first li . Please use dl , dd and dt instead - this is not the perfect match but better than ul / li !

2. a is for links but you dont call a url. Please use the dd itself or a span so you dont need the javascript:void(0); and no e.preventDefault(); .

   Date of Operations Hidden Content until Clicked

     <dd class="list-menu show"> Date of Operations <i class="icon-chevron-down pull-right"></i> </dd> <dt class="list-content">Hidden Content until Clicked</dt> 

   $(".show").click(function(e) { $(this).closest(".icon-chevron-down").toggleClass("icon-rotate-180"); $(this).next("dt.list-content").toggle(); });

(i copied a part of RoyMcCrossan's answer from Selecting Closest Match using jQuery )

Sorry structure broken, looks like a bug in Stackoverflow.