在 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 {&nbsp; 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 {&nbsp; 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() {&nbsp; if ($(this).hasClass("pdf")) {&nbsp; &nbsp; $(this).next().addClass('pdf');&nbsp; }});.pdf {&nbsp; color: red;&nbsp; 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() {&nbsp; &nbsp; $(this).next().addClass('pdf');});.pdf {&nbsp; color: red;&nbsp; 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>