Question

假设我们有这段代码：

<div id='m1'>

<div class="c"></div>
<div class="c"></div>
<div class="c"></div>

</div>
<div id='m2'>

<div class="c"></div>
<div class="c"></div>
<div class="c"></div>

</div>

我怎样才能在id为'm1'的div中获得带有'c'类的div？然后设置一些CSS设置......

Answer 1

div#m1 div.c {
    /* Properties here ... */
}

这会将属性应用于class="c"中div div内的所有id="m1" $("div#m1 div.c").style(/* something */);。

如果您正在询问如何使用Javascript 获取它们，您可以使用任何捆绑CSS类型选择器库（如Sizzle！）的库来轻松完成此操作。

例如，在JQuery中：

dojo.style(dojo.query("div#m1 div.c"), /* something */);

或者在道场：

{{1}}

Answer 2

var m1Div = document.getElementById("m1");
var cDivs = m1Div.getElementsByClassName("c");

for(i = 0; i < cDivs.length; i++)
{
    //apply css attributes to cDivs[i]
}

Answer 3

来自here的此函数将获取具有特定类ID的特定标记下的所有元素的数组。

function getElementsByClassName(classname, node) {
    if(!node) node = document.getElementsByTagName("body")[0];

    var a = [];
    var re = new RegExp('\\b' + classname + '\\b');
    var els = node.getElementsByTagName("*");

    for(var i=0,j=els.length; i<j; i++)
        if(re.test(els[i].className))a.push(els[i]);

    return a;
}

所以你的代码是：

elementsInM1 = getElementsByClassName('c', 'm1');

if( elementsInM1.length > 0 )
{
    // Loop through, apply styles as you would to normal elements
    // returned by getElementByID
}

Answer 4

使用jQuery，您可以执行以下操作：

$('#m1 > .c').css('color', 'red');

您也可以使用纯{JavaScript} document.querySelectorAll('#m1 > .c')然后循环遍历返回的节点集合中的每个项目并使用element.setAttribute('color', 'red')

在div中获取具有相同类名的div

4 个答案: