Question

使用以下HTML，我如何只选择父级别的所有div，除了属性为<?php $sock = fsockopen('127.0.0.1' /* server */, 80 /* port */, $errno, $errstr, 1); $request = "<Hello><Get>1</Get></Hello>"; fputs($sock, "POST /iWsService HTTP/1.0\r\n"); fputs($sock, "Content-Type: text/xml\r\n"); fputs($sock, "Content-Length: ".strlen($request)."\r\n\r\n"); fputs($sock, "$request\r\n"); $buffer = ''; while($response = fgets($request, 1024)){ $buffer .= $response; } // Then you can parse that result as you want ?>的div及其子级使用JavaScript？

换句话说，在调用查询后，我想获得一个包含这些div的数组：class="first"，class="all"和class="second"。

class="third"

Answer 1

这些div是某个容器的子级（至少body，如果不是更直接的话）。因此，对于您不想要的.first元素，您可以使用带有child combinator和:not子句的选择器：

var divs = document.querySelectorAll("body > div:not(.first)");

当然，如果body不是他们的容器，请将其替换为元素的选择器。

示例：

＆＃13;

var divs = document.querySelectorAll("body > div:not(.first)");
console.log("matching elements: " + divs.length);
Array.prototype.forEach.call(divs, function(div, index) {
  console.log(index + ": " + div.className);
});

＆＃13;

<div class="all">
  <div class="header">All</div>
  <div class="cell-1"></div>
  <div class="cell-2"></div>
  <div class="cell-3"></div>
  <div class="cell-4"></div>
</div>
<div class="first">
  <div class="header">First</div>
  <div class="cell-1"></div>
  <div class="cell-2"></div>
  <div class="cell-3"></div>
  <div class="cell-4"></div>
</div>
<div class="second">
  <div class="header">Second</div>
  <div class="cell-1"></div>
  <div class="cell-2"></div>
  <div class="cell-3"></div>
  <div class="cell-4"></div>
</div>
<div class="third">
  <div class="header">Third</div>
  <div class="cell-1"></div>
  <div class="cell-2"></div>
  <div class="cell-3"></div>
  <div class="cell-4"></div>
</div>

＆＃13;

Answer 2

你需要使用直接子组合子和否定伪类来构建你的CSS selector。

Vanilla JavaScript：

var divs = document.querySelectorAll("body > div:not(.first)");

jQuery的：

var divs = $("body > div:not(.first)");

在上面的示例中，我假设这些div是body元素的直接子元素，但如果不是，则可以使用其父元素的id或class代替：

<div id="container">
   //divs here
</div>

将是：

document.querySelectorAll("#container > div:not(.first)");

和

<div class="container">
   //divs here
</div>

将是：

document.querySelectorAll(".container > div:not(.first)");

直接子组合子>仅选择符合第二个选择器标准的元素（div用于所有div元素），并且只在第一个选择器下方一级（body用于容器div的正文，#container和.container。忽略第一个选择器下方的其他元素（例如<div class="header">Third</div>等）。

否定伪类将一个简单的选择器作为参数（在本例中为.first），并从结果中排除与该选择器匹配的元素。

您可以在此处看到演示：http://jsbin.com/puqosimigu/edit?html,js,console

如何使用JavaScript选择除了一个及所有子元素之外的所有元素？

2 个答案: