Question

我有一个页面，想要为每个标题添加一个css类，其中包含一个特定的单词，位于div＆＃34; metadata＆＃34;中。这是一个例子：

<ul class="postlist">
<li><div class="postBox">
<h2><a href="http://sample.com"> Test Sample 1</a></h2>
<div class="metadata"><a href="LinkToCat" class="link" id="cat">Internal, Test</div>
</div></li>

<li><div class="postBox">
<h2><a href="http://sample.com"> Test Sample 2</a></h2>
<div class="metadata"><a href="LinkToCat" class="link" id="cat">Test</div>
</div></li>
</ul>

我试着像这样的jquery：

if ($('div.postBox > div.metadata > a:contains("Internal")').length > 0)
    $( "h2 a" ).addClass( "a-internal" );

这有效 - 但问题是，每个标题元素都会获得类＆＃34; a-internal＆＃34;，因为标题没有唯一的ID /名称，对吗？是否有人知道我怎么能只将类添加到特定标题？

非常感谢！

Answer 1

而不是if使用DOM关系来定位元素。使用.closest()遍历最常见的祖先，然后使用.find()定位元素。

使用

$('div.postBox > div.metadata > a:contains("Internal")')
    .closest('div.postBox') //Traverse up-to common ancestor
    .find("h2 a") //target element
    .addClass("a-internal")

＆＃13;

$('div.postBox > div.metadata > a:contains("Internal")').closest('div.postBox').find("h2 a").addClass("a-internal")

＆＃13;

.a-internal {
  color: green
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="postlist">
  <li>
    <div class="postBox">
      <h2><a href="http://sample.com"> Test Sample 1</a></h2>
      <div class="metadata"><a href="LinkToCat" class="link" id="cat">Internal, Test</div>
</div></li>

<li><div class="postBox">
<h2><a href="http://sample.com"> Test Sample 2</a></h2>
        <div class="metadata"><a href="LinkToCat" class="link" id="cat">Test</div>
</div></li>
</ul>

＆＃13;

:has()也可以使用

$('div.postBox:has(> div.metadata > a:contains("Internal"))')
    .find("h2 a") 
    .addClass("a-internal")

＆＃13;

$('div.postBox:has(> div.metadata > a:contains("Internal"))')
    .find("h2 a") 
    .addClass("a-internal")

＆＃13;

.a-internal {
  color: green
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="postlist">
  <li>
    <div class="postBox">
      <h2><a href="http://sample.com"> Test Sample 1</a></h2>
      <div class="metadata"><a href="LinkToCat" class="link" id="cat">Internal, Test</div>
</div></li>

<li><div class="postBox">
<h2><a href="http://sample.com"> Test Sample 2</a></h2>
        <div class="metadata"><a href="LinkToCat" class="link" id="cat">Test</div>
</div></li>
</ul>

＆＃13;

如果包含要添加css类的特定文本，请检查多个div

1 个答案: