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

您可能希望修改Click事件处理程序的选择器。

＆＃13;

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

＆＃13;

.red{color:red}

＆＃13;

<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>

＆＃13;

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

＆＃13;

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

＆＃13;

.red{color:red}

＆＃13;

<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>

＆＃13;

Answer 2

我猜您需要从所有孩子中删除red课程。

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

Answer 3

只需将.red类添加到当前点击的div中，然后使用siblings()从其兄弟姐妹中删除这个类。

＆＃13;

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

＆＃13;

.red{color:red}

＆＃13;

<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>

＆＃13;

Answer 4

你错过了你的选择器

＆＃13;

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

＆＃13;

  .red{color:red}

＆＃13;

    <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>

＆＃13;

删除不参与父元素

4 个答案: