如何使用replaceWith替換多個div類中的img和div ID的

現在，一些replaceWith代碼正在工作，另一個不是。例如，此代碼的工作：如何使用replaceWith替換多個div類中的img和div ID的

$('.maincontent>h1:contains("Oakland Raiders")').replaceWith('<img src="http://i.nflcdn.com/static/site/6.3/img/subheaders/oak.png" class="subheader" />');

下面是從網站上關於如果使用在Firefox中檢查元素這個特定部分的一些HTML代碼：

<div class="maincontent"> 

    <img class="subheader" src="http://i.nflcdn.com/static/site/6.3/img/subheaders/stl.png"></img> 
    <div id="team_wrapper"> 
     <div id="team-overview-wrapper"> 
      <div id="team-overview-profile"> 
       <div id="team-overlay-container"> 
        <img class="team-overlay" src="/img/m25/right/339.png"></img> 
       </div> 
       <div class="team-bio"> 
        <div class="team-logo"> 
         <div class="teamimage-left" style="background-image: url("/img/m25/left/339.png");"></div> 
        </div>

注意：你所不能看到的是h1元素，但您可以看到如果您查看頁面源而不是檢查元素。

H1的部分你不能看到在檢查元素，但可以看到，如果你看一下頁面的源代碼，它看起來像這樣：

<div class="maincontent"> 

    <h1>Oakland Raiders</h1> 
         <div id="team_wrapper"> 
         <div id="team-overview-wrapper"> 
         <div id="team-overview-profile"> 
            <div id="team-overlay-container"> 
                    <img class="team-overlay" src="/img/m25/right/22.png"> 
                    </div> 
            <div class="team-bio"> 
             <div class="team-logo"> 
                      <div class="teamimage-left" style="background-image: url(&quot;/img/m25/left/22.png&quot;);"></div> 
                      </div> 
               <div class="team-info">

我不能讓工作正在取代團隊覆蓋圖像或團隊徽標圖像。我嘗試了以下方法，它什麼都不做。

$('.maincontent>h1:contains("Oakland Raiders")').replaceWith('<img src="http://www.papermag.com/uploaded_images/cclinemustard-funny.png" class="team-overlay" />');

或

$('.maincontent>h1:contains("Oakland Raiders")').replaceWith('<img src="http://www.papermag.com/uploaded_images/cclinemustard-funny.png" class="teamimage-left" />');

我怎能取代teamimage左圖像，並使用replaceWith團隊，覆蓋圖像？我不知道爲什麼在頂端的代碼工作，但這一個沒有。

來源

2015-04-28 user3556644

'h1'元素在哪裏？正如我所想，它被替換爲'img.subheader'。我錯了嗎？ –

你可以分享你的代碼，包括'h1'元素......最可能的失敗原因是一個糟糕的選擇器（即元素不存在）。 'replaceWith'方法應該可以正常工作：http://jsfiddle.net/vbw910qo/ – Fenton

@RadonirinaMaminiaina ive添加了h1元素。您只能在查看頁面源 – user3556644

replaceWith方法應該做你想做的事。

您提到檢查元素和查看源代碼 HTML之間存在差異。很可能，「原始」HTML（通過查看源文件可見）由網站正在使用的其他腳本之一修改。換句話說，當你的JavaScript被觸發時，H1元素可能真的不再存在。

編輯：

的查看源 HTML確實包括腳本NEER底部...

<script type="text/javascript" src="https://googledrive.com/host/0B7MXCCVKUtiefmxvbFpMU0R6X2xIRHpPeWFHYV9vSmw3dVJIWndyUGJWSUlpX1c3THhHRUE/all42815.js"></script>

...的與圖像橫幅取代了H1標題：

$('.maincontent>h1:contains("Oakland Raiders")').replaceWith('<img src="http://i.nflcdn.com/static/site/6.3/img/subheaders/oak.png" class="subheader" />');

您應該找到另一種方法來識別t他的團隊（基於檢查元素 HTML），或者確保您的腳本是先運行的。

來源

2015-04-28 14:00:59

@ user3556644我想我找到了衝突的JS。更新我的答案以包含它。 –

這實際上是我正在使用的腳本。我試圖添加代碼來替換我提到的其他圖像。 – user3556644

@ user3556644然後我認爲這是你的腳本有衝突。 :-)事情是，你的代碼用圖像替換H1。然後，當你想再次使用H1作爲參考點時，它不再存在。 –

如何使用replaceWith替換多個div類中的img和div ID的

回答

相關問題