Question

我有这个：

<div class="row">
    <div class="col-md-4">
    </div>
    <div class="col-md-6">
    </div>
    <div class="col-md-8">
    </div>
    <div class="col-md-12">
    </div>
    <div class="A">
    </div>
    <div class="B">
    </div>
</div>

我想选择行类为col-md-4,6,8,12的子类。有没有什么好方法可以一次选择所有？

可以有多个行div，我将使用wrapAll将每个div div的子句包装在其他div中。因此，如果我使用wrapAll，它只是将其他行div的所有内容转移到第一行div。如果我将选择器查询放在循环中，它只是将子项包装成行div的数量。我不想让这件事发生。

你了解这些人吗？

Answer 1

非JavaScript解决方案

尝试使用^或*选择器选择它们。例如：

[class^="col-md-"] {}

这将选择具有开始的类别与col-md-的元素，从而使最后的数字无关紧要。

或

[class*="col-md-"] {}

这将选择具有包含col-md-的类的元素。

以下是MDN所说的内容：

<强> [ATTR ^ =值]

表示属性名为attr的元素   其值以“value”为前缀。

<强> [ATTR * =值]

表示属性名称为attr的元素，其值至少包含一个字符串“value”作为子字符串。

演示：

.row [class^="col-md-"] {
  color: red;
}

<div class="row">
    <div class="col-md-4">
      foo bar
    </div>
    <div class="col-md-6">
      foo bar
    </div>
    <div class="col-md-8">
      foo bar
    </div>
    <div class="col-md-12">
      foo bar
    </div>
    <div class="A">
      foo bar
    </div>
    <div class="B">
      foo bar
    </div>
</div>

Answer 2

如果您有其他子元素col-md-*并且您不想定位它们。然后可以使用后代子选择器或.find()：

$('.row .col-md-4,.row .col-md-6 ')

或

$('.row').find('.col-md-4,.col-md-6,.col-md-8,.col-md-12')

否则你可以使用属性包含选择器：

$('.row [class*="col-md-"]')

Answer 3

是的，你可以使用原生的查询选择器全部＆＃39;功能

就像那样：

document.querySelectorAll('.row [class*="col-md"]')

[class * =＆＃34; col-md＆＃34;] 表示＆＃34;所有包含＆＃39; col-md＆＃34;

的课程

Answer 4

$('.row>[class|="col-md"]')

.row是一个类选择器

＆GT;是一个儿童选择器

[]是属性选择器

| =表示前缀

代码意味着选择那些具有类＆＃34; row＆＃34;的子代，其属性类的值具有前缀＆＃34; col-md＆＃34;。

注1：根据推荐规则，属性select的值部分（无论是等于关系，前缀等于还是其他种类的等于），= =后面的部分应该是一个字符串。由于select已经是＆＃39;＆＃39;中的字符串，因此您需要使用＆＃34;＆＃34;描述一个字符串。但是如果你使用＆＃34;＆＃34;制作选择器字符串，你需要使用＆＃39;＆＃39;作为一个字符串。

注2：我刚试过| =＆＃34; col-md - ＆＃34;但它不起作用。

选择特定班级的孩子

4 个答案:

非JavaScript解决方案

演示：