在 ap 标签内的 i 标签内选择一个类，并将一个类添加到内的锚点标签

Question

我必须选择页面上前面有 i 标记的所有锚标记，该标记具有 pdf 类。i 标签和锚点都在 ap 标签内。然后在锚标签中添加一个pdf类。我写了这个并将类添加到 p 标记中。我只需要把它添加到锚标记即可：$("p>i").each(function() {  if ($(this).hasClass("pdf")) {    $(this).parent().addClass('pdf');  }});.pdf {  color: red}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p><i class="pdf">&nbsp; nn</i> <a href="www.somesite.com">link</a></p>

Answer 1

如果我理解正确的话，你所需要的只是$("p i.pdf + a").addClass('pdf')：

$("p i.pdf + a").addClass('pdf')

.pdf {

  color: red

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p><i class="pdf">&nbsp; nn</i> <a href="www.somesite.com">link</a></p>

<p><i class="pdf">&nbsp; nn</i> <a href="www.somesite.com">link</a></p>

<p><i class="pdf">&nbsp; nn</i> <a href="www.somesite.com">link</a></p>

Answer 2

使用 CSS 选择器p>.pdf+a：

$('p>.pdf+a').addClass('testClass');

.testClass {

  color: #f00;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p><i class="pdf">&nbsp; nn</i> <a href="www.somesite.com">link</a></p>

<p><i class="pdf">&nbsp; nn</i> <a href="www.somesite.com">link</a></p>

<p><i class="pdf">&nbsp; nn</i> <a href="www.somesite.com">link</a></p>

<p><i class="pdf">&nbsp; nn</i> <a href="www.somesite.com">link</a></p>

<p><i class="pdf">&nbsp; nn</i> <a href="www.somesite.com">link</a></p>

Answer 3

无需过多更改代码，即可使用next()：

$("p>i").each(function() {

  if ($(this).hasClass("pdf")) {

    $(this).next().addClass('pdf');

  }

});

.pdf {

  color: red;

  text-decoration: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p><i class="pdf">&nbsp; nn</i> <a href="www.somesite.com">link</a></p>

<p><i>&nbsp; nn</i> <a href="www.somesite.com">link</a></p>

<p><i class="pdf">&nbsp; nn</i> <a href="www.somesite.com">link</a></p>

更好的

$("p>i.pdf").each(function() {

    $(this).next().addClass('pdf');

});

.pdf {

  color: red;

  text-decoration: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p><i class="pdf">&nbsp; nn</i> <a href="www.somesite.com">link</a></p>

<p><i>&nbsp; nn</i> <a href="www.somesite.com">link</a></p>

<p><i class="pdf">&nbsp; nn</i> <a href="www.somesite.com">link</a></p>