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");