javascript - 将 jquery 中的 css 添加到具有指定类名和文本的元素

Question

我需要使用 jQuery 为我的页面中的某些元素设置 css。我无法修改 html 代码。我需要为 span 元素设置 css。我有更多具有相同 class name 但上面有另一个文本的 span。我在跨度上有这些文本:阅读更多或加载更多。我只需要为带有“阅读更多”的按钮添加 css。

这是 html:

<div class="loop-entry-content clr">
    <header>
        <h2 class="loop-entry-title entry-title">
            <a href="http://staging.princetonpartners.com/organization-trapped-inside-legacy-box/">Is Your Organization Trapped Inside the ...</a>
        </h2>
    </header>

    <div class="loop-entry-excerpt entry clr">
        In my first job out of college, I worked as a Cobol programmer updating the computer ...<br>
        <span class="home_readmore"><a href="http://staging.princetonpartners.com/organization-trapped-inside-legacy-box/">Read more</a></span>
    </div>
</div>

这是我试过的:

 $('#readMore_button').addClass('home_readmore_button');

 $("span:contains('Read More')").parent().addClass("home_readmore_button");

第一个修改具有相同类的所有元素。第二个它什么都不做。谢谢!

Answer 1

:selector 的文档状态:

text: A string of text to look for. It's case sensitive.

所以你需要:

$("span:contains('Read more')").parent().addClass("home_readmore_button");

$("span:contains('Read more')").parent().addClass("home_readmore_button");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loop-entry-content clr">
        <header>
         <h2 class="loop-entry-title entry-title">
          <a href="http://staging.princetonpartners.com/organization-trapped-inside-legacy-box/">Is Your Organization Trapped Inside the ...</a>
          </h2>
        </header>

    <div class="loop-entry-excerpt entry clr">
              In my first job out of college, I worked as a Cobol programmer updating the computer ...<br>
         <span class="home_readmore"><a href="http://staging.princetonpartners.com/organization-trapped-inside-legacy-box/">Read more</a></span>
     </div>
 </div>