JQuery根据Text of Anchor标签创建超链接

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery根据Text of Anchor标签创建超链接相关的知识,希望对你有一定的参考价值。

我有下表&什么是基于它的文本使表<td>可点击/超链接的单元格的最佳方法。

<table id="fresh-table" class="table">
    <thead>
        <th data-field="id" data-sortable="true">ID</th>
        <th data-field="URL" data-sortable="true">URL</th>
        <th data-field="Results">Results</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td><a href="#">https://google.com</td>
            <td>Woot</td>
        </tr>     
        <tr>
            <td>1</td>
            <td><a href="#">https://facebook.com</td>
            <td>Hax</td>
        </tr>     
    </tbody>
</table>   
$(document).ready(function(){
    var x = $('.clickme').getText();
    console.log(x);
});

我想基于它得到的文本替换href的值:https://google.comhttps://facebook.com

https://codepen.io/anon/pen/zyNdrZ

答案

首先,请注意您的html无效;你错过了</a>标签来关闭table内的锚点。

其次,jQuery没有getText()方法。我认为你的意思是使用text()代替。

关于你的问题,你可以使用prop()来设置href元素的a属性等于它们的text()。最简单的方法是为prop()提供一个函数,该函数将在集合中的每个元素上执行。试试这个:

$('#fresh-table a').prop('href', function() {
  return $(this).text();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="fresh-table" class="table">
  <thead>
    <th data-field="id" data-sortable="true">ID</th>
    <th data-field="URL" data-sortable="true">URL</th>
    <th data-field="Results">Results</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a href="#">https://google.com</a></td>
      <td>Woot</td>
    </tr>
    <tr>
      <td>1</td>
      <td><a href="#">https://facebook.com</a></td>
      <td>Hax</td>
    </tr>
  </tbody>
</table>
另一答案

只需几行代码就可以在没有jQuery的情况下实现这一目标:

document.addEventListener("DOMContentLoaded", () => {
  for (const element of document.querySelectorAll("a[href='#']")) {
    element.href = element.innerText;
  }
});

https://codepen.io/anon/pen/wRgqxB

以上是关于JQuery根据Text of Anchor标签创建超链接的主要内容,如果未能解决你的问题,请参考以下文章

jquery easyUi 根据数据动态创建tabs标签

JQuery 获取多个select标签option的text内容

获取 JQuery 数据表单元格内锚标记的文本值

D3.js 加标签

d3旋转文字标签

javascript 滚动到JQuery Anchor