Question

网站上有一段文字，我正在帮助管理我需要更改的内容。我没有访问html所以我不能把类或id放在任何东西上，也不能只改变文本。这会让事情变得太容易了！

所以，我需要更改文字＆＃34;找不到动物！＆＃34;其他的东西，我能做到的唯一方法是通过javascript / jquery。

以下代码确实有效，但效果不错。它实际上是在其他页面上选择其他元素并进行更改。比如

<div align="center" class="boxedLinks">[ <a href="/admin/content/edit_content?Location=Header">Edit Page Header</a> ]</div>

有没有办法只选择一个特定的div？

任何帮助都会很棒！

＆＃13;

$('#Page88').find('div:contains(No Animals Found!)').text("Hold on! Our kittens have to grow a bit more before they'll be ready for adoption!")

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='Page88'>
  <td width="100%" valign="top">
    <div id="PageHeader">
    </div>

    <div id="fullSize">
      <div class="hd"></div>
      <div class="bd"></div>
    </div>
    <div class="pageCenterTitle">Kittens</div>

    <div align="center">
      <a href="/animals/search">Animal Search</a>
    </div>
    <br>
    <br>

    <div align="center">No Animals Found!</div>


    <!-- Begin Bottom Layout -->
    <div id="PageFooter">

    </div>
    <br>
    <br>
    <br>
  </td>

</div>

＆＃13;

Answer 1

您可以在jquery选择代码中添加.first()，以获取包含“未找到动物”的第一个div！＆＃39;或类似的东西

（很难确切地说到什么，直到我们看到它的变化代码不应该改变，但这会给你一个如何工作的例子）

＆＃13;

$('#Page88').find('div:contains(No Animals Found!)').first().text("Hold on! Our kittens have to grow a bit more before they'll be ready for adoption!")

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='Page88'>
  <td width="100%" valign="top">
    <div id="PageHeader">
    </div>

    <div id="fullSize">
      <div class="hd"></div>
      <div class="bd"></div>
    </div>
    <div class="pageCenterTitle">Kittens</div>

    <div align="center">
      <a href="/animals/search">Animal Search</a>
    </div>
    <br>
    <br>

    <div align="center">No Animals Found!</div>
    <div align="center" class="boxedLinks">[ <a href="/admin/content/edit_content?Location=Header">Edit Page Header</a> ]</div>

    <div align="center">No Animals Found!</div>
    <div align="center">No Animals Found!</div>
    <!-- Begin Bottom Layout -->
    <div id="PageFooter">

    </div>
    <br>
    <br>
    <br>
  </td>

</div>

＆＃13;

Answer 2

我将添加align = center作为标识符并获取第一个DIV，以确保是唯一要更改的内容：

＆＃13;

$('#Page88').find('div:contains("No Animals Found!")[align="center"]').first().text("Hold on! Our kittens have to grow a bit more before they'll be ready for adoption!")

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='Page88'>
  <td width="100%" valign="top">
    <div id="PageHeader">
    </div>

    <div id="fullSize">
      <div class="hd"></div>
      <div class="bd"></div>
    </div>
    <div class="pageCenterTitle">Kittens</div>

    <div align="center">
      <a href="/animals/search">Animal Search</a>
    </div>
    <br>
    <br>

    <div align="center">No Animals Found!</div>
    <div align="center">No Animals Found!</div>
    <div align="center">No Animals Found!</div>
    <div align="center">No Animals Found!</div>


    <!-- Begin Bottom Layout -->
    <div id="PageFooter">

    </div>
    <br>
    <br>
    <br>
  </td>

</div>

＆＃13;

https://jsfiddle.net/HappyiPhone/ct2jsds2/4/

Answer 3

这是一种使用正则表达式和String.prototype.replace()方法的简单方法，它只会替换#Page88 $('#Page88').html(function () { return $(this) .html() .replace( 'No Animals Found!', 'Hold on! Our kittens have to grow a bit more before they\'ll be ready for adoption!' ); });内容中第一个出现的vert：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='Page88'>
  <td width="100%" valign="top">
    <div id="PageHeader">
    </div>

    <div id="fullSize">
      <div class="hd"></div>
      <div class="bd"></div>
    </div>
    
    <div class="pageCenterTitle">Kittens</div>

    <div align="center">
      <a href="/animals/search">Animal Search</a>
    </div>
    
    <br>
    <br>

    <div align="center">No Animals Found!</div>
    <div align="center">No Animals Found!</div>
    <div align="center">No Animals Found!</div>

    <!-- Begin Bottom Layout -->
    <div id="PageFooter"></div>
    <br>
    <br>
    <br>
  </td>

</div>

div

另一种方法是迭代所有str.notFound === $(div).text()个元素进行比较boolean并跟踪var isReplaced = false, str = {}; str.notFound = 'No Animals Found!', str.replaceWith = 'Hold on! Our kittens have to grow a bit more before they\'ll be ready for adoption!'; $('#Page88') .find('div') .each(function(index, div) { if (!isReplaced && str.notFound === $(div).text()) { $(div).text(str.replaceWith); isReplaced = true; } });变量：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='Page88'>
  <td width="100%" valign="top">
    <div id="PageHeader">
    </div>

    <div id="fullSize">
      <div class="hd"></div>
      <div class="bd"></div>
    </div>
    
    <div class="pageCenterTitle">Kittens</div>

    <div align="center">
      <a href="/animals/search">Animal Search</a>
    </div>
    
    <br>
    <br>

    <div align="center">No Animals Found!</div>
    <div align="center">No Animals Found!</div>
    <div align="center">No Animals Found!</div>

    <!-- Begin Bottom Layout -->
    <div id="PageFooter"></div>
    <br>
    <br>
    <br>
  </td>

</div>

type

Answer 4

考虑这个例子：

＆＃13;

$("div:contains(test)").css("border", "1px solid red");

＆＃13;

div {
    padding: 10px;
    border: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div>
        <div>
            <div>
                test
            </div>
        </div>
    </div>
</div>

＆＃13;

使用div:contains，您将更新所选的div 及其所有父级，因为他们所有包含您正在寻找的文字。

因为选择器会找到你最后找的的特定div，所以你可能不想要.first() - 你想要.last()。< / p>

现在考虑我们的示例，使用.last()：

＆＃13;
＆＃13;
$("div:contains(test)").last().css("border", "1px solid red");
＆＃13;
div { padding: 10px; border: 1px solid black; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <div> <div> <div> test </div> </div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

您的代码如下：

$('#Page88').find('div:contains(No Animals Found!)').last().text("Hold on! Our kittens have to grow a bit more before they'll be ready for adoption!")

不使用课程

4 个答案: