javascript - jQuery 中 .parent() 的奇怪结果

Question

所以基本上我想在您点击的 li 和“类别 div”中添加一个名为“active”的类。在本例中，div 的 ID 为“vadarmindfulness”。我以为我的代码会起作用，但它不起作用。

jQuery 代码:

    $('.downdrop li').click(function() {
    var currentId = $(this).attr('id');

    $('.info-title').hide().load('content.html' + " #" + currentId + "-title").fadeIn(400);
    $('.info-text').hide().load('content.html' + " #" + currentId + "-text").fadeIn(400);

    $(this).addClass('active');
    alert($(this).parent().parent().next().addClass('active'));
});

HTML代码:

<ul id="dropdown">
                    <li class="twolines"><div id="vadarmindfulness" class="active">Vad är mindfulness</div>
                        <ul class="downdrop">
                            <li id="hurserprogrammetut"><a href="#">Hur ser programmet ut</a></li>
                            <li id="effekterochbiverkningar">Effekter och ev. biverkningar</li>
                            <li id="evidens">Evidens</li>
                            <li id="sammanfattning">Sammanfattning av forskning</li>
                            <li id="egenforskning">Vår egen forskning</li>
                        </ul>
                    </li>

Answer 1

让我们看看这是做什么的

$(this).parent().parent().next().addClass('active')

HTML

<ul id="dropdown">
    <li class="twolines"> <!-- 2nd parent -->
        <div id="vadarmindfulness">Vad är mindfulness</div>
        <ul class="downdrop"> <!-- first parent -->
            <li id="hurserprogrammetut"><a href="#">Hur ser programmet ut</a></li>
            <li id="effekterochbiverkningar">Effekter och ev. biverkningar</li>
            <li id="evidens">Evidens</li>
            <li id="sammanfattning">Sammanfattning av forskning</li>
            <li id="egenforskning">Vår egen forskning</li> <!-- clicked -->
        </ul>
    </li>
    <!-- next() goes here / there is no next becuase it gets the next element after 2nd parent (not the element inside the 2nd parent!) -->
</ul>

你想要的是

$(this).parent().prev().addClass('active');

HTML

<ul id="dropdown">
    <li class="twolines">
        <div id="vadarmindfulness">Vad är mindfulness</div> <!-- previous element of 1st parent -->
        <ul class="downdrop"> <!-- first parent -->
            <li id="hurserprogrammetut"><a href="#">Hur ser programmet ut</a></li>
            <li id="effekterochbiverkningar">Effekter och ev. biverkningar</li>
            <li id="evidens">Evidens</li>
            <li id="sammanfattning">Sammanfattning av forskning</li>
            <li id="egenforskning">Vår egen forskning</li> <!-- clicked -->
        </ul>
    </li>
</ul>