在属性值内查找和替换

Question

我有这个 HTML 代码：

<div class='images'>
  <img class='thumbnail' src='background/01.png' />  
  <img class='thumbnail' src='background/02.png' />  
  <img class='thumbnail' src='background/03.png' />  
  <img class='thumbnail' src='background/04.png' />  
  <img class='thumbnail' src='background/05.png' />  
</div>

我希望将每个 "background" 更改为 "category"。我正在使用这个 jQuery 片段：

jQuery(document).ready(function(){
 $('.thumbnail').attr('src', $('.thumbnail').attr('src').replace('background', 'category'));
});

但结果：

<div class='images'>
  <img class='thumbnail' src='category/01.png' />  
  <img class='thumbnail' src='category/01.png' />  
  <img class='thumbnail' src='category/01.png' />  
  <img class='thumbnail' src='category/01.png' />  
  <img class='thumbnail' src='category/01.png' />  
</div>

请注意：我无法更改 img class。我哪里错了？

谢谢

Answer 1

首先请注意，最好为此使用 prop()。其次，您可以传递 prop() 一个函数来处理匹配集中的每个特定元素并更新其值。试试这个：

$('.thumbnail').prop('src', function(i, val) {
    return val.replace('background', 'category');
});

在属性值内查找和替换

Find and replace within attribute values

html

jquery

attributes

image

attr