javascript - 在 div 中查找值并替换

Question

我有 3 个值需要在 3 个 div 内替换。

<div class="bx-pager-item">
    <a class="bx-pager-link active" data-slide-index="0" href="">1</a>
</div>
<div class="bx-pager-item">
    <a class="bx-pager-link" data-slide-index="1" href="">2</a>
</div>
<div class="bx-pager-item">
    <a class="bx-pager-link" data-slide-index="2" href="">3</a>
</div>

我需要用值'test'替换1；2，值为“test1”；和 3 的值为“test2”。

我已经尝试了以下代码但没有成功，任何帮助将不胜感激：

$(document).ready(function() {  
    var fandreplace = document.getElementsByClassName('bx-pager-item').innerHTML.replace('3', 'test2'); 
}); 

Answer 1

您应该循环每个元素并相应地替换它们的值。

根据索引替换

$('.bx-pager-link').text(function (i, v) {
    return 'test' + (i > 0): (i - 1): '';
});

根据值替换

$('.bx-pager-link').text(function (i, v) {
    var val = parseInt(v, 10);
    return 'test' + (val > 0): (val - 1): '';
});

Answer 2

您需要单独设置它们，因为新的 html 将是唯一的（您可以根据您真正想要替换它的内容进行循环）。

这是使用每个元素的“索引”更改内部 html 的简单方法。

小提琴

$(document).ready(function() {  
    $('.bx-pager-item:eq(0)').html('test'); 
    $('.bx-pager-item:eq(1)').html('test1'); 
    $('.bx-pager-item:eq(2)').html('test2'); 
});

Answer 3

在 jquery 你会做

 $('.bx-pager-item > a').each(function(){
    var str = $(this).text().replace('3', 'test2');
    $(this).text(str);
});

如果你想要几个值

 var map = {'3':'test2', '1':'test'};
 $('.bx-pager-item > a').each(function(){
    $(this).text(map[$(this).text()]);
});

Answer 4

JSFiddle：http: //jsfiddle.net/rNLvU/

$('.bx-pager-item').each(function(){
    var $this = $(this);
    $this.text('test'+$this.text().trim());
});

请注意，在这种情况下需要修剪文本，因为元素的 text() 值中可能出现前导空格

Answer 5

试试这个：使用 each 选择所有元素

$(document).ready(function(){
    $('.bx-pager-link').each(function (i, elem) {
        $(elem).text('test '+i);
    });
});