jquery - 删除不引用父元素的类

Question

我想删除引用父级的类，如下代码段所示。为什么我做不到

$('div').click(function(){
    $('#parent div').removeClass('red');
    $(this).addClass('red');
});

.red{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<div id="parent">
    <div class="red">A</div>
    <div class="red">B</div>
    <div class="red">C</div>
    <div class="red">D</div>
    <div class="red">E</div>
    <div class="red">F</div>
<div>

PS:我想修改html是最后一个选项。

Answer 1

您可能想要修改点击事件处理程序的选择器。

$('#parent div').click(function(){
    $('#parent div').removeClass('red');
    $(this).addClass('red');
});

.red{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<div id="parent">
    <div class="red">A</div>
    <div class="red">B</div>
    <div class="red">C</div>
    <div class="red">D</div>
    <div class="red">E</div>
    <div class="red">F</div>
<div>

或者可能想要阻止事件传播。

$('div').click(function(e){
    e.stopPropagation();
    $('#parent div').removeClass('red');
    $(this).addClass('red');
});

.red{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<div id="parent">
    <div class="red">A</div>
    <div class="red">B</div>
    <div class="red">C</div>
    <div class="red">D</div>
    <div class="red">E</div>
    <div class="red">F</div>
<div>