Question

如果我们点击的元素上有相同的列

<li class="root-level">
    <a href="#" class="levelentry">
        MAN
        <div class="level">
            <a href="#" class="back">Back</a>
        </div>
    </a>
</li>
<li class="root-level">
    <a href="#" class="levelentry">
        WOMAN
        <div class="level">
            <a href="#" class="back">Back</a>
        </div>
    </a>
</li>

$(document).on('click', '.levelentry', function() {
    $('.level', this).addClass('active');
});

但如果是这样的话。因为level不在levelentry范围内。但仍然是root-level

的一个房间

<ul class="nav">
    <li class="root-level">
        <a href="#" class="levelentry">MAN</a>
        <div class="level">
            <a href="#" class="back">Back</a>
        </div>
    </li>
    <li class="root-level">
        <a href="#" class="levelentry">WOMAN</a>
        <span class="dont"></span>
        <div class="level">
            <a href="#" class="back">Back</a>
        </div>
    </li>
    <li class="root-level"> ............ (etc)
    </li>
</ul>

如何使用元素$(this)？除了使用$(this).next()之外还有其他方法吗？

如果我使用

$(document).on('click', '.levelentry', function() {
    $('.level').addClass('active');
});

所以，所有level都是有效的

Answer 1

使用.closest()定位root-level元素，然后使用.find()到level元素

$(document).on('click', '.levelentry', function(e) {
    e.preventDefault();
    $(this).closest('.root-level').find('.level').addClass('active');
});

＆＃13;

$(document).on('click', '.levelentry', function(e) {
    e.preventDefault();
    $(this).closest('.root-level').find('.level').addClass('active');
});

＆＃13;

.active{background-color:red}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
    <li class="root-level">
        <a href="#" class="levelentry">MAN</a>
        <div class="level">
            <a href="#" class="back">Back</a>
        </div>
    </li>
    <li class="root-level">
        <a href="#" class="levelentry">WOMAN</a>
        <span class="dont"></span>
        <div class="level">
            <a href="#" class="back">Back</a>
        </div>
    </li>
    <li class="root-level"> ............ (etc)
    </li>
</ul>

＆＃13;

Answer 2

您可以siblings()使用$(this)。 DEMO

$(document).on('click', '.levelentry', function() {
    $(this).siblings('.level').addClass('active');
});

如果您只想选择第一个.level，可以将:first DEMO添加到siblings('.level:first')

如果不同的空间如何激活元素？

2 个答案: