是否可以使用查询将页面标题附加到我认识其 href 的锚标记中?

Question

我在页面中有一个锚标签：

<a href="#cost">Item Cost</a>

页面标题New York

我想将锚标记中的页面标题附加为：

<a href="#cost">Item Cost in New York</a>

href#cost且内部文本Item Cost的所有锚标记

我无法在PHP中编辑页面，因为它是使用页面构建器在Wordpress中制作的。我只能使用jQuery/javascript在客户端编辑文本。

可以使用jQuery来完成吗？

Answer 1

$(document).ready(function() {
var data = $('#cost').text() + " in " + document.title;
console.log(data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>asdasd</title>
<div id='cost'>asdadasd</div>
<a href="#cost">Item Cost</a>
<a href="#cost">Item Cost in New York</a>

注意：- 您可以使用document.title获取文档的标题并将其附加到$('#cost').text()div的文本中

Answer 2

您可以使用attribute selector和:containsjQuery自定义选择器找到a元素：$('a[href="#cost"]:contains("Item Cost")')然后将页面标题连接到这些元素。

这是一个演示：

$(() => {
$('a[href="#cost"]:contains("Item Cost")').text('Item Cost ' + $(document).find('title').text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>in New York</title>
<a href="#cost">Item Cost</a>
<a href="#cost">Item Cost</a>

Answer 3

你需要使用document.title和正确的jQuery选择器。

$(document).ready(function(){
// More info https://api.jquery.com/category/selectors/
$("a[href|='#cost']").each(function(idx, obj){
//Your condition
if($(obj).text() == "Item Cost"){
$(obj).text($(obj).text() + " in " + document.title);
}
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>New York</title>
<a href="#cost">Item Cost</a><br/>
<a href="#cost">Item Cost2</a><br/>
...<br/>
<a href="#cost">Item Cost</a><br/>
<a href="#cost">Bad Item Cost</a>