我不确定如何最好地解决这个问题。问题是这样的:我有一个菜单(列表项),它具有不规则的显示模式。由于它是从 CMS 中输出的,所以我不能直接更改 HTML。如果数组中的单词与链接中的单词匹配,则希望将该单词用 span 标签包裹起来。
以下是简化后的代码:
<li class="item1"><a href="gosomewhere.html">About My Store</a></li>
<li class="item2"><a href="gosomewhereelse.html">Find Locations</a></li>
result i want is this:
<li class="item1"><a href="gosomewhere.html"><span class="bigwords">About My </span>Store</a></li>
<li class="item2"><a href="gosomewhere.html">Find <span class="bigwords">Locations</span></a></li>
我可以通过以下方法找到第一个单词:
$(function() {
$.fn.wrapStart = function (numWords) {
var node = this.contents().filter(function () { return this.nodeType == 3 }).first(),
text = node.text(),
first = text.split(" ", numWords).join(" ");
if (!node.length)
return;
node[0].nodeValue = text.slice(first.length);
node.before('<span class="bigwords">' + first + '</span>');
};
$("li.item1 a").wrapStart(1);
然而,我想要做的是浏览一个数组列表并将我想要的特定单词包装在它们出现的任何位置。
该数组可能是这样的:about,store,faq...
脚本会查找这些单词并将它们包装起来...
不太确定如何去做。如果更容易的话,由于这些大单词只出现在开头或结尾而不在中间... 我可以编写另一个函数来查找最后一个单词。
只有5个菜单项(不会改变),而且单词永远不会改变,这就是为什么我考虑使用一个数组的原因...
以下是插件使用时的输出结果:
<ul class="menu><li class="item-102 parent">
<a class="about" title="About my store" href="#">
<span class="bigwords">
<a xmlns="http://www.w3.org/1999/xhtml">About</a>
</span>
<a xmlns="http://www.w3.org/1999/xhtml"> my store</a>
</a>
</li></ul>
$(".menu").find("a[xmlns]").children().unwrap()
,但如果可能的话,我想能够在插件内部防止它。此外,我在Firefox 6中没有看到这种行为。 - Kevin B