Question

下面的代码适用于第一个h3，但它也改变了第二个，所以我最后都说“国家过滤器”，我需要第一个h3说“国家过滤器”，第二个说'状态过滤器' 。任何帮助，而不改变HTML，将不胜感激。感谢。

这是html：

<h3>  
    <span class="label">Browse by</span> 
    <span class="location">Country</span> 
</h3>
<h3>  
    <span class="label">Browse by</span> 
    <span class="location">City</span> 
</h3>

这是jquery：

if ($(".location:contains('Country')")) {
    $(".label").text(function () {
        return $(this).text().replace("Browse by", "Country");
    });
    $(".location").text(function () {
        return $(this).text().replace("Country", "Filter");
    });
}

if ($(".location:contains('City')")) {
    $(".label").text(function () {
        return $(this).text().replace("Browse by", "State");
    });
    $(".location").text(function () {
        return $(this).text().replace("City", "Filter");
    });
}

Answer 1

使用

//Find location that contains text
var countrylocation = $(".location:contains('Country')"); 
//As label is prev element, Here you can also use siblings
countrylocation.prev(".label").text(function () {
    return $(this).text().replace("Browse by", "Country");
});
countrylocation.text(function () {
    return $(this).text().replace("Country", "Filter");
});

var citylocation = $(".location:contains('City')");
citylocation.prev(".label").text(function () {
    return $(this).text().replace("Browse by", "State");
});
citylocation.text(function () {
    return $(this).text().replace("City", "Filter");
});

参考文献：

Answer 2

使用ID

标识外部h3标记

<h3 id="country">
    <span class="label">Browse by</span> 
    <span class="location">Country</span> 
</h3>

然后相应地更新您的选择器：

$("#country .label").text(function () {
    return $(this).text().replace("Browse by", "Country");
});

Answer 3

更简单：

$(".location:contains('Country')").siblings().text("Country");
$(".location:contains('City')").siblings().text("State");
$(".location").text("Filter");

为什么要按照其中包含的文字定位跨度？为什么你需要改变这样的内容？好奇。

替换元素中的特定文本而不影响具有相同类的元素

3 个答案: