Javascript更改div中跨度的文本

Question

我的html是这样的，只能识别div的类，没有span的id。我需要用那些 span 中的一些其他文本替换一个 href 文本和一个图像。

<div class ="myclass">
    <span style="vertical-align:middle;">
      <a href="http://link1"></a>
    </span>

    <span style="vertical-align:middle;">
      <a href="http://link2"></a>
    </span>

    <span style="vertical-align:middle">
      <span class="myspan">
        <a href="http://testlink3">
        <img title="test" class="imglink"></a>
      </span>
    </span>

    <span>
      <a href="http://link4">Text - *This text needs to be replaced*</a>
    </span>
</div>

在上面的代码中，我需要将第三个 span 中的 img 替换为可点击的文本(应该将我们带到 url)和第四个 span 到新文本(保持 url 相同)。

当缺少 ID/类时，如何识别这些特定的 span？

Answer 1

我们在这里有 3 件不同的事情要做:

如何替换给定元素内的内容

这可以很快完成:

$("selector").html("New text, same href");

用另一个元素替换给定的元素

这可以通过这种方式完成:

$("selector").replaceWith("<a href='somewhere.html'>I replaced  an Img</a>");

选择 DOM 元素

当您没有 ID，也没有元素的 CSS 类，但您确实知道它在另一个元素中的位置以及有关该元素的一些信息(如 tagName)时，您可以选择父元素并指定一个相对位置。

var myElement = $("parentElement").find("tagName:eq(position)");

记住这种选择器("tagName:eq(position)")是零索引，所以如果你想抓取第三个元素，你需要告诉 jQuery tagName:eq(2)。

因此，假设您的父元素(未在问题中给出)是一个带有 parent CSS 类的 div。

您要做的第一件事是选择此 div。

var parent = $(".parent");

然后你想在第三个跨度内找到 Img。

var myImg = parent.find("span:eq(2)").find("img");

现在你可以用你想要的任何东西替换这个元素

myImg.replaceWith("<a href='somewhere.html'>I replaced  an Img</a>");

请注意，jQuery 允许您将 HTML 元素作为纯字符串传递。

最后，您需要更改第四个跨度内的文本。这可以通过以下方式完成:

parent.find("span:eq(3)").find("a").html("New text, same href");