Question

现在，有些替换代码正在运行，另一些则没有。例如，此代码有效：

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

如果你在firefox中使用Inspect Element，这里有一些关于这个特定部分的网站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元素，但你可以看到，如果你看一下Page Source而不是Inspect Element。

您在Inspect Element中看不到的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" />');

如何使用replaceWith替换teamimage-left图像和团队覆盖图像？我不知道为什么顶部的代码可以正常工作，但这个代码并不存在。

Answer 1

replaceWith方法应该按照你想要的方式完成。

您提到 Inspect Element 和 View Source HTML之间存在差异。很有可能，＆＃34;原创＆＃34; HTML（通过 View Source 可见）由网站正在使用的其他脚本之一进行修改。换句话说，当你的JavaScript被触发时，H1元素可能真的不再存在。

编辑：

查看源 HTML确实包含一个底部的脚本......

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

您应该找到另一种方法来识别团队（基于 Inspect Element HTML），或者确保您的脚本先运行。

如何使用replaceWith在几个div类和div id中替换img

1 个答案: