Question

我的HTML是这样的，我只能识别div的类，没有span'ID。我需要将href个文本和一个图像替换为span内的其他文本。

<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>

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

如何在缺少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）。

所以，假设您的父元素（未在问题中给出）是 div ，其中包含父 CSS类。

你要做的第一件事是选择这个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");

Answer 2

您可以使用document.querySelector根据a选择href：

document.querySelector("a[href='http://link4']").innerHTML = "The text you want to put in"

由于您对jQuery持开放态度，因此也适用：

$("a[href='http://link4']").text("The text you want to put in")

Answer 3

您可以使用:nth-child()选择器从您可以识别的div中进行选择。

有关:nth-child()的更多信息：http://api.jquery.com/nth-child-selector/

然后从您找到的子img中选择span标记。

Answer 4

var s = document.getElementsByTagName('span');

var i = spans[2].firstChild.children[1]; // here you find your img
i.parentNode.appendChild(<<your new text element>>);
i.parentNode.removeChild(img);// remove the image

var a = spans[3].firstChild; // here is your href
a.innerHTML = 'your new text';

Javascript更改div内跨度的文本

4 个答案: