Question

我的单词列表很长（超过1000个）。使用下面的示例列表。

我想使用jquery为下面的每个单词生成一个google搜索链接，而不是手动进行，因为它太多了。

来自：

<span>apples</span>
<span>oranges</span>
<span>grapes</span>

至（使用jquery）：

<span>apples</span> <a href="https://www.google.com/search?q=apples">apples</a>
<span>oranges</span> <a href="https://www.google.com/search?q=oranges">orangs</a>
<span>grapes</span> <a href="https://www.google.com/search?q=grapes">grapes</a>

我该怎么做？

Answer 1

在代码帮助下，您，而是使用span为其赋予唯一的类名称，这样它就永远不会影响其他代码，

$( "span" ).each(function() {
  var keyword = $(this).text();
  $("<a href='https://www.google.com/search?q="+keyword+"'>"+keyword+"</a>").insertAfter($(this))
});

Answer 2

$("span").each(function(){
   var text=$(this).text();
   var $elem=$('<a href="https://www.google.com/search?q='+ text +'">'+ text +'</a>');
   $elem.insertAfter(this);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>apples</span>
<span>oranges</span>
<span>grapes</span>

Answer 3

您不需要jQuery，将Vanilla JS用于此类简单问题是一个好习惯！这是在Vanilla JS中执行此操作的代码：

var spans = document.querySelectorAll('span');
spans.forEach(function(ele){
  var key = ele.innerText;
  ele.outerHTML += ' <a href="https://www.google.com/search?q=' + key + '">' + key + '</a>';
});

<span>apples</span>
<span>oranges</span>
<span>grapes</span>

此外，您也不想直接使用<span>，因此，最好使用代码中唯一的id或class属性，以使上述代码不起作用。不会影响其他spam元素。见下文：

var glinks = document.querySelectorAll('.glinks');
glinks.forEach(function(ele){
  var key = ele.innerText;
  ele.outerHTML += ' <a href="https://www.google.com/search?q=' + key + '">' + key + '</a>';
});

<span class="glinks">apples</span>
<span class="glinks">oranges</span>
<span class="glinks">grapes</span>

Answer 4

您可以使用jquery .wrap（）方法用a和href包裹每个范围。

$('span').each(function(){
var text = $(this).text();
$(this).wrap('<a href="https://www.google.com/search?q='+ text + '"></a>');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>apples</span>
<span>oranges</span>
<span>grapes</span>

如果我有什么建议，可以将它们全部放入ul> li>结构中。

$('body').prepend('<ul class="items"></ul>');

$('span').each(function(){
  var text = $(this).text();
  $(this).wrap('<li class="item"><a    href="https://www.google.com/search?q='+ text + '"></a><li>');
})

$('.items').append($('.item'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>apples</span>
<span>oranges</span>
<span>grapes</span>

为元素中的每个单词生成一个google搜索链接

4 个答案: