如何使用父 ID 或 DIV 替换/删除子类

Question

Suppose I want to remove the abc class in the div contained just inside the "oneClass" and replace it with another class name may be "xyz" , Note that I DO NOT want the "abc class" inside the "twoClass" to be replaced Can some one guide me how to achieve it?

<div class = "oneClass" id = "oneId">
        <div class = "abc">  // NOT ALLOWED TO ADD ANYTHING HERE
            Phil
        </div>
    </div>

    <div class ="twoClass" id = "twoId">
        <div class = "abc">  // NOT ALLOWED TO ADD ANYTHING HERE
            Heath
        </div>
    </div>

After applying jquery or javascript the output should be

<div class = "oneClass" id = "oneId">
        <div class = "xyz">  // CLASS NAME GOT CHANGED
            Phil
        </div>
    </div>

    <div class ="twoClass" id = "twoId">
        <div class = "abc">  // CLASS NAME REMAINES SAME
            Heath
        </div>
    </div>

Kindly guide me here.

Answer 1

Use the child selector > in jQuery to select the element with class abc directly under oneClass . Then simply remove the abc class and add the xyz class to it.

 $(".oneClass > .abc").removeClass("abc").addClass("xyz")

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "oneClass" id = "oneId"> <div class = "abc"> Phil </div> </div> <div class ="twoClass" id = "twoId"> <div class = "abc"> Heath </div> </div>

Answer 2

var a = $('.oneClass');
var childEle = a.children();
Array.prototype.forEach.call(childEle,function(ele) {
    ele.classList = "xyz";
})

Answer 3

<div class = "oneClass" id = "oneId">
        <div class = "abc">  // NOT ALLOWED TO ADD ANYTHING HERE
            Phil
        </div>
    </div>

    <div class ="twoClass" id = "twoId">
        <div class = "abc">  // NOT ALLOWED TO ADD ANYTHING HERE
            Heath
        </div>
    </div>

        function find(){

            $('div#oneID').childern('div').addClass('success');

            $('div#oneID').childern('div').removeClass('success');

        };

try this one.

Answer 4

find , removeClass and addClass do what you want like this.

 $('.oneClass').find('.abc').removeClass('abc').addClass('xyz');

 .xyz{ width: 500px; margin: auto; border: 3px solid #73AD21; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "oneClass" id = "oneId"> <div class = "abc"> // NOT ALLOWED TO ADD ANYTHING HERE Phil </div> </div> <div class ="twoClass" id = "twoId"> <div class = "abc"> // NOT ALLOWED TO ADD ANYTHING HERE Heath </div> </div>

Answer 5

You should use the id of the parent div.

$('#oneID > .abc').removeClass('abc').addClass('xyz');

 $('#oneId > .abc').removeClass('abc').addClass('xyz');

 .xyz { width: 100px; height: 100px; background-color: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="oneClass" id="oneId"> <div class="abc"> <!-- NOT ALLOWED TO ADD ANYTHING HERE Phil --> </div> </div> <div class="twoClass" id="twoId"> <div class="abc"> <!-- NOT ALLOWED TO ADD ANYTHING HERE Heath --> </div> </div>