Question

我正在使用WP插件Really Simple Breadcrumbs并为我生成这些链接：

<div class="breadcrumb">
   <a href="http://example.com"> Example 1 </a>
   " >> "
   <a href="http://example2.com"> Example 2 </a>
   " >> Blog Page Title Lorem"
</div>

我需要在这个html中更改两件事。一，我需要重写第一个链接说<a href="/blog"> Blog </a>。其次，我需要删除预告片“Blog Page Title Lorem”。第三，我想将>>更改为>。我认为所有这些都会使用相同的技术，因此我将它们列在同一个问题中。我对JS，jQuery，CSS显示/隐藏技巧开放，无论有什么用。我该怎么做？

Answer 1

如果你进入插件文件夹，你会发现breadcrumb.php 在该文件中，将有一个名为$seperator的变量，其值设置为>>，您应该可以在那里更改它。

如果您想更改<a>的任何CSS，只需在style.css文件中使用.breadcrumb a。

至于更改内容标题，这些是由插件通过数据库中的信息（标题，标题，永久链接等）生成的。第一个链接应该将您的博客标题作为其参数。如果不是，在环路开始之前在breadcrumb.php中你也可以在之前写入它，以便它始终生成。

博客页面lorem是面包屑中的最后一个应该被分配到你拥有的任何页面。如果你能在breadcrumb.php中找到生成它的地方，你可以删除它并把它放在那里：

the_title();

最好的运气。

Answer 2

要获取下一个text-node之后元素，请使用nextSibling.nodeValue。 Node.nextSibling只读属性在其父节点的childNodes列表中返回紧跟在指定节点之后的节点，如果指定节点是该列表中的最后一个节点，则返回null。

Node.nodeValue属性返回或设置当前节点的值。

要设置第一个元素的href，可以使用index中each的第一个参数。

试试这个：

$('a').each(function(index, item) {
  if (index === 0) {
    item.href = '/blog';
  }
  item.nextSibling.nodeValue = ' > '
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="breadcrumb">
  <a href="http://example.com"> Example 1 </a> " >> "
  <a href="http://example2.com"> Example 2 </a> " >> Blog Page Title Lorem"
</div>

Fiddle here

Answer 3

//
//find first child and change href
document.getElementsByClassName('breadcrumb')[0].children[0].href='"/blog"';
//find first child and change innercontent
document.getElementsByClassName('breadcrumb')[0].children[0].innerHTML='Blog';
//find all nodes in breadcrumb
var all_nodes=document.getElementsByClassName('breadcrumb')[0].childNodes;
//loop through to find pattern
for(var i=0;i<all_nodes.length;++i){
//replace any pattern with Blog.....and replace it with nothing
all_nodes[i].textContent=all_nodes[i].textContent.replace(/ *Blog Page Title Lorem */,'');
//replace all >> with >
all_nodes[i].textContent=all_nodes[i].textContent.replace(/ *>> */,'>');


}

<div class="breadcrumb">
   <a href="http://example.com"> Example 1 </a>
   " >> "
   <a href="http://example2.com"> Example 2 </a>
   " >> Blog Page Title Lorem"
</div>

来自插件的Changin不受欢迎的HTML生成的代码

3 个答案: