Question

我正在尝试在字符串末尾添加一个“粉红色”的span类。

我可以使用一个元素来处理它，但是当页面加载多个时，它只会返回第一个元素。

我创建了jSFiddle

因为jsFiddle有两个标题：

20史密森街

25 Jones Street

但它只返回史密森街20号。

他们能以任何方式定位每个元素吗？

我的jQuery如下：

// Style The Last Element In The Property h3 string

function change_colour()
{
    var property_title =  $('.property-title').html();

    var lastWord = property_title.substring(property_title.lastIndexOf(" ")+1);
    var lastIndex = property_title.lastIndexOf(" ")
    var property_title = property_title.substring(0, lastIndex);
    var style = '<span class="pink"> '+lastWord+'</span>';

    return property_title + style;
}

$(".property-title").each(function() {
    $('.property-title').html(change_colour());
});

由于

Answer 1

问题是你没有传递对change_color（）方法的正确引用。

尝试此解决方案。

    $(".property-title").each(function() {
            var property_title =  $(this).html();

    var lastWord = property_title.substring(property_title.lastIndexOf(" ")+1);
    var lastIndex = property_title.lastIndexOf(" ")
    var property_title = property_title.substring(0, lastIndex);
    var style = '<span class="pink"> '+lastWord+'</span>';
    $(this).html(property_title + style);
});

Answer 2

您需要引用当前属性标题：

var property_title =  $(this).html();

Answer 3

问题在于这一行

var property_title =  $('.property-title').html();

总是按照documentation提取第一个匹配元素的HTML。

您应该将感兴趣的元素作为参数（或this）传递，因为您已在.each回调中包含此信息。

使用参数：

$(".property-title").each(function() {
    $('.property-title').html(change_colour(this));
});

function change_colour(el)
{
    var property_title =  $(el).html();

    // the rest as before
}

使用this：

$(".property-title").each(function() {
    $('.property-title').html(change_colour.call(this));
});

function change_colour()
{
    var property_title =  $(this).html();

    // the rest as before
}

Answer 4

传入元素并使用它来捕获属性标题：

function change_colour(el) {
  var property_title =  $(el).html();
  var lastWord = property_title.substring(property_title.lastIndexOf(" ")+1);
  var lastIndex = property_title.lastIndexOf(" ")
  var property_title = property_title.substring(0, lastIndex);
  var style = '<span class="pink"> '+lastWord+'</span>';
  return property_title + style;
}

$(".property-title").each(function() {
  $(this).html(change_colour(this));
});

Demo

Answer 5

一个鲜为人知的事情是你可以将一个函数传递给jQuery的html()方法：

function change_colour(index, html)
    var lastWord = html.substring(html.lastIndexOf(" ")+1);
    var lastIndex = html.lastIndexOf(" ")
    html = html.substring(0, lastIndex);
    var style = '<span class="pink"> '+lastWord+'</span>';

    return html + style;
}

$(".property-title").html(change_colour); // reference to function!

定位每个类并返回一个字符串和类

5 个答案: