Question

我正在尝试定位h3并将其包含在我的所有内容中。这是我目前的目标代码。

$('.perk:first-child').prev().addClass("perk").text("success");

这是我的代码：

jQuery(document).ready(function($) {
  $('.perk:first-child').prev().addClass("perk").text("success");
  $(".perk").wrapAll("<div class='new' />");
});

.new {
  background-color: pink;
  width: 50%;
  float: right;
}

.selected {
  background-color: red;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Perk Rule</h3>
<div class="perk">Test1</div>
<div class="perk">Test2</div>
<div class="perk">Test3</div>
<div class="selected">Selected Perks</div>

Answer 1

$(".perk:first-child")未选择第一个.perk DIV。由于<h3>在它之前，它不能是包含它们的任何元素的第一个子元素。此选择器表示元素具有类perk并且也是第一个子，它并不意味着第一个具有类perk 的子元素。< / p>

如果您想选择第一个<h3>之前的.perk，只需选择所有.perk，然后使用.prev('h3')。

jQuery(document).ready(function($) {
  $('.perk').prev('h3').addClass("perk").text("success");
  $(".perk").wrapAll("<div class='new' />");
});

.new {
  background-color: pink;
  width: 50%;
  float: right;
}

.selected {
  background-color: red;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Perk Rule</h3>
<div class="perk">Test1</div>
<div class="perk">Test2</div>
<div class="perk">Test3</div>
<div class="selected">Selected Perks</div>

在wrapAll（）中包含前一个元素

1 个答案: