html - 选择包含特定 id 的上一个 div

Question

我正在使用 joomla，我有以下 html

<div id="ja-footerwrap">
    <div class="moduletable">
        <div id="bottom-slider">
            <!--some contents-->
        </div>
    </div>
    <div class="moduletable">
        <div id="bottom-slider">
            <!--some contents-->
        </div>
    </div>
    <div class="moduletable">

            <!--some contents-->

    </div>
<!--and other divs with classes moduletable------>
</div>

我必须选择 moduletable 并且必须display: inline-block;仅适用于包含 id 为bottom-slider的 div 。我怎样才能做到这一点？

Answer 1

首先，您不能拥有多个具有相同 ID 的 DOM 对象，然后第一件事就是更改标记并将其转换id="bottom-slider"为class="bottom-slider"

然后您可以使用 jQuery更改带有类moduletable 和 子类的父 div ：bottom-slider

$('.bottom-slider').parent('.moduletable').css({'display':'inline-block'});

这里的小提琴：http: //jsfiddle.net/9tvcf/

希望这可以帮助

Answer 2

如果您使用的是 jQuery，您可以直接执行

$('.bottom-slider').css({'display':'inline-block'});

PS：将id更改为class。

Answer 3

使用 css4，您也可以使用纯 css 来完成。

.module-table! > #bottom-slider {
display:inline-block;
}

Answer 4

我希望将来像这个选择器会被选为这个

.bottom-slider - .moduletable{/*css here*/}

这种方法最好，因为有+儿童选择的符号。

就像~我们希望被放置的那样^