Question

我处于需要使用.wrap和：first-child。

的情况

这就是我在做的事情：

<script>$("a").wrap("<div class='category-wrapper'></div>");</script>
<script>$("div.category-wrapper:first-child").addClass("first");</script>

这应该在链接之外呈现div.category-wrapper，然后为每个第一个div.category-wrapper添加“first”类。

输出结果为：

<div class="category-wrapper"><a href="#">Test</a></div>

哪个好！但是，我无法让“第一个孩子”工作（它没有添加“第一个”类）。如果我在其他地方使用它，那么它确实有效，这与前一个元素的动态渲染有关。

示例输出将是：

<div class="category-wrapper"><a href="#">Test #1</a></div>
<div class="category-wrapper"><a href="#">Test #2</a></div>
<div class="category-wrapper"><a href="#">Test #3</a></div>
<div class="category-wrapper"><a href="#">Test #4</a></div>

期望的输出：

<div class="category-wrapper first"><a href="#">Test #1</a></div>
<div class="category-wrapper"><a href="#">Test #2</a></div>
<div class="category-wrapper"><a href="#">Test #3</a></div>
<div class="category-wrapper"><a href="#">Test #4</a></div>

但是，我无法使其发挥作用。

Answer 1

first-child取决于您尝试选择的元素的上下文："Description: Selects all elements that are the first child of their parent."。

检查出来：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>First Child Exp</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

<style type="text/css">
.first { background-color: red; }
</style>

</head>

<body>

<h1>First Child Exp</h1>

<div>
<div class="category-wrapper"><a href="#">Test</a></div>
</div>

<script type="text/javascript">
$("div.category-wrapper:first-child").addClass("first");
</script>

</body>
</html>

如果你删除没有类的div，那么div class =“category-wrapper”将是它父元素的第二个子节点，因为h1将是body的第一个子节点。如果你删除了h1，div class =“category-wrapper”将再次成为正文的第一个孩子。

因此，父元素必须包含所有div class =“category-wrapper”元素。

Answer 2

您是否尝试过$（“div.category-wrapper a：first-child”）？

Answer 3

如果你有这样的事情：

<div>
  Hello there
  <span>Somethiing something</span>
  <a href='somewhere'>wrap me</a>

然后，当<a>标记被包装时，您将拥有以下内容：

<div>
  Hello there
  <span>Somethiing something</span>
  <div class='category-wrapper'><a href='somewhere'>wrap me</a></div>

添加<div> 不是包含<div>的第一个孩子。

使用“：first”代替“：first-child”可能对您有用。这两个当然不总是可以互换的。

Answer 4

试试这个：

$("a").wrap("<div class='category-wrapper'></div>");
$("div.category-wrapper:first").children().addClass('first');

第一个孩子没有选择预期的元素

4 个答案: