如何使用父 ID 或 DIV 替換/刪除子類

Question

假設我想刪除包含just inside the "oneClass"中的div中的abc class並將其替換為另一個類名可能是"xyz" ，請注意，我不希望替換"twoClass"的"abc class"有人可以指導我如何實現它嗎？

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

應用 jquery 或 javascript 后，輸出應該是

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

請在這里指導我。

Answer 1

使用 jQuery 中的子選擇器 >直接在oneClass下選擇類abc的元素。 然后只需刪除abc類並將xyz類添加到它。

 $(".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');

        };

試試這個。

Answer 4

find , removeClass和addClass做你想做的事情。

 $('.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

您應該使用父 div 的 id。

$('#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>