Question

$('body').find('.grid-container > .parsys .parsys')

我在一些代码中发现了这一点，我不确定它是什么比较以及为什么在大于符号之后有两个类。它是否试图找到特定的层次结构？如果是这样，为什么第二类？

Answer 1

在jQuery（或css）选择器中，大于号>不用于比较。它意味着元素的直接孩子。

另请注意，前导点表示它是类选择器而不是id。对于ID，我们使用#符号。

.class .selector {}
#id .selector {}

Answer 2

没有strong个选择器（以id开头），但有类选择器（以#开头）。

没有比较，CSS选择器.为父元素（>）的直接子节点指定规则。

上面的代码搜索具有类.grid-container的元素，这些元素是具有类.parsys的元素的后代，这些元素是具有类.parsys的元素的直接子元素（>选择器） .grid-container元素。

Answer 3

第一个id表示应该作为直接子项存在于grid-container下的元素。第二个id表示.parsys

下任何级别的任何元素

Answer 4

这将找到具有此基本嵌套结构的所有元素。只有本例中最内层的div才能匹配。

<body>
    <div class="grid-container">
        <div class="parsys">
            <div class="parsys">
                hello
            </div>
        </div>
    </div>
</body>

Answer 5

这个查找带有.parsys类的元素是否在一个元素中，类.parsys直接在带有.grid-container类的元素下面？

<div class=".grid-container">
  <div class=".parsys">
    <div class=".parsys" [matched]>
    </div>
    <div class=".parsys" [matched]>
    </div>
  </div>
</div>

Answer 6

没有ID。查找内部的代码（＆＃39; ...＆＃39;）和$（＆＃39; ...＆＃39;）是选择器。

选择器允许您操作HTML元素。代码将使用类＆＃34; parsys＆＃34;在body中搜索一个元素。在一个元素里面有一个＆＃34; parsys＆＃34;其中父级是一个具有类＆＃34; grid-container＆＃34;。

的元素

...
<body>
<div class="grid-container>
  <div class="parsys">
    <div class="otherElementOrNot">
       <div  class="parsys">
           this div is the target.
      </div>
    </div>
  </div>
</div>
...

这个班级比较做什么？

6 个答案: