訪問jquery子元素

Question

<div style="float: right; margin-top: 15px; " class=" class1">

    <div style="min-width: 50px; min-height: 29px; opacity: 0.5; " class=" sub1_class">
        <div style="height: 29px; background-image: none; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: initial initial; background-repeat: initial initial; " class=" sub2_class">

            <div style="height: 39px; overflow-x: hidden; overflow-y: hidden; zoom: 1; cursor: pointer; background-image: url('images/new'); margin-top: 1px; background-position: 0px 0px; background-repeat: no-repeat no-repeat; " class=" sub3_class" unselectable="on">
            </div>
        </div>
    </div>
</div>

我想訪問子元素並更改上面dom結構的css。 我該怎么做。 我正在學習jQuery。 我已經將class1類分配給了一個變量。 myclass=document.getElementsByClassName('class1')[0];

而且我需要更改類名sub2_class和sub3_class的css。 我該怎么做呢？？

Answer 1

如果您使用的是jQuery，則無需使用getElementsByClassName ，請使用jQuery的選擇器。

$( '.class1 .sub2_class' ).css( 'background-color', 'red' );

（順便說一句，考慮使用類而不是內聯CSS來設計元素的樣式。）

Answer 2

下面的代碼可以做到這一點，

$("div.class1").find("div.sub1_class").addClass("new_css_class_name");
$("div.class1").find("div.sub2_class").addClass("new_css_class_name");

如果要刪除現有的CSS類，也可以使用removeClass。

Answer 3

這是一個小例子：

<style>
my-class { color: red}
</style>

<div id="id-parent">
 <span id="id-child-1">hello</span> <span id="id-child-2">world</span>
</div>

<script>
$("#id-parent>*").addClass("my-class"); //you make hello world to red
</script>