Question

如何在下面的HTML中使用jquery替换“SUN”和“MOON”替换“Sunday”和“Monday”。

<table> 
  <tr>
    <th>
      <div>
        <div class="xyz">
          <a href="www.google.com"> 20 may <span>Sunday</span></a>
        </div>
      </div>
    </th>
    <th>
      <div>
        <div class="xyz">
          <a href="www.google.com"> 21 may <span>Monday</span></a>
        </div>
      </div>
    </th>
  </tr>
</table>

Answer 1

您可以使用:contains功能。它的作用是找到您要查找的文本并替换为目标文本。演示here。唯一的事情是你必须为你想要替换的每个单词单独执行它。

Html代码

<div class="container"><span>Sunday</span></div>
<div class="container"><span>Monday</span></div>

Jquery代码

$(".container span:contains('Sunday')").html('Sun');//Replace to Sun
$(".container span:contains('Monday')").html('Mon');//Replace to Mon

Answer 2

尝试this jsfiddle之类的内容。这是执行实际工作的代码：

$(".xyz").each(function() {
    var theSpan = $(this).find("span").first();

    switch (theSpan.text()) {
        case "Sunday":
            theSpan.text("SUN");
            break;
        case "Monday":
            theSpan.text("MON");
            break;
        // include additional case statements
    }
});

请注意，此特定方法仅适用于您拥有的确切布局，因为它使用find调用，然后使用first仅获取单个span标记原始div的结构。

如果您要在span中提供包含要替换的文字的课程，您将获得更一致的结果，可能不需要find来电。

作为对此的修改，如果你真正想要的是“每天全名的全封闭缩写”，你可以使用一些字符串操作。您可以使用此代码（also available in this jsfiddle）完成相同的操作，而不是大switch语句：

$(".xyz").each(function() {
    var theSpan = $(this).find("span").first();
    theSpan.text(theSpan.text().substr(0,3).toUpperCase());
});

Answer 3

    $(function(){
        $(".xyz").each(function(){
         var obj=$(this).text($(this).text();
             obj.replace('Sunday','Sun'));
         obj.replace('Monday','Mon'));
        });
    });

Did you mean this?

Answer 4

试试这个

$(".xyz span:contains('Sunday')").text('Sun');
$(".xyz span:contains('Monday')").text('Mon');

如何使用div中的类名替换span文本

4 个答案: