Javascript改变div内的跨度文本

Question

我的html是这样的，我只能识别div的类，没有span的ID。我需要在span s内替换一个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> 

在上面的代码

，我需要一个可点击的文本（它应该带我们到URL）和第四span内的文本到一个新的文本（保持URL一样更换第三span内img ）。

如何在缺少id/classes时识别这些特定的span？

Answer 1

你可以使用document.querySelector选择基于该href的a：

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 2

你可以使用:nth-child()选择器选择从div你可以识别。

更多:nth-child()：http://api.jquery.com/nth-child-selector/

然后选择您发现span孩子的img标签。

Answer 3

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

Answer 4

我们有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)"); 

记住，这样的选择器（“变量名：EQ（位置）”）是零索引，所以如果你想抓住第三个元素，你需要告诉jQuery的标签名：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");