Question

我需要修改通过ajax加载的内容，但似乎无法访问它。我无法访问正在执行初始加载的js文件，因此我需要编写一个单独的函数来更改内容。

内容需要自动修改，无需用户点击或与页面上的任何内容进行交互。

在下面的示例中，'news'div是硬编码的，'article'div是通过ajax加载的。

HTML

<div id="news">
<div class="article"><img src="headline1_small.jpg">
<div class="article"><img src="headline2_small.jpg">
<div class="article"><img src="headline3_small.jpg">
</div>

的jQuery

$(document).ready(function() {
  console.log( $("#news").html() );
});

控制台

<div id="news">
</div>

我如何访问这些文章？我想从img src中删除'_small'。

谢谢！

Answer 1

这应该有效：

$(document).ajaxStop(function() {
    $("#news").find('img').attr("src", function(_, src){
        return src.replace('_small', '');
    });
});

Answer 2

我如何访问这些文章？我想从img src中删除'_small'。

例如：

$('#news .article img').attr('src', function() {
    return this.src.replace('_small', '');
});

您可以在AJAX成功完成时执行此代码

$(document).ajaxSuccess(function() {
    // above code
});

Answer 3

你说文章div是通过AJAX加载的，似乎这个脚本在加载之前就已经运行了。尝试在#news之后放置此脚本，以便在执行时已加载所有内容。

<div id="news">
<div class="article"><img src="headline1_small.jpg">
<div class="article"><img src="headline2_small.jpg">
<div class="article"><img src="headline3_small.jpg">
</div>

<script>
$(document).ready(function() {
  console.log( $("#news").html() );
});
</script>

Answer 4

删除＆＃34; _small＆＃34;从img标签的src开始，还有另一种方法。你不需要访问html（） - ＆gt; #news div的innerHTML。

你能做的就是抓住所有的＆＃34; .article＆＃34; div＆＃39; s然后改变img标签。

$(".article img").each(function() {
   $(this).attr('src', $(this).attr('src').replace("_small", ""));
});

由于

无法使用jQuery访问通过ajax加载的元素

4 个答案: