主页 / 问题 / 642309
Accepted
Alexey Giryayev
Asked:2020-03-21 17:31:29 +0000 UTC2020-03-21 17:31:29 +0000 UTC

按对象的名称将标签包装在链接中

  • 772

我们有这样一个对象，其属性以标题和链接的形式出现：

var links = {"Title1": "link1",
             "Title2": "link2",
             "Title3": "link3"
             };

该页面包含一个项目符号列表，如下所示：

<ul class="list">
<li><b>12:00</b> <h3>Title1</h3> <i>Some text</i></li>
<li><b>13:00</b> <h3>Title2</h3> <i>Some text</i></li>
<li><b>14:00</b> <h3>Title3</h3></li>
</ul>

是否可以通过标题找到匹配项并将链接准确添加到此列表项？我会很感激一个例子，至少是所需项目的定义。

最后结果：

<ul class="list">
<li><b>12:00</b> <h3>Title1</h3> <i>Some text</i> <a href="link1" title="Title1">Read more</a></li>
<li><b>13:00</b> <h3>Title2</h3> <i>Some text</i> <a href="link2" title="Title2">Read more</a></li>
<li><b>14:00</b> <h3>Title3</h3> <a href="link3" title="Title3">Read more</a></li>
</ul>

或者，在极端情况下，将标题包裹在链接中。

javascript

2 个回答

  1. Best Answer

    var links = {
  "Title1": "link1",
  "Title2": "link2",
  "Title3": "link3"
};

var list = $('.list');

for (var item in links) { 
  var el = list.find('h3:contains("' + item + '")');
  el.closest('li').append(' <a href="' + links[item] + '" title="' + item + '">Read more</a>');
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li><b>12:00</b>
    <h3>Title1</h3> <i>Some text</i></li>
  <li><b>13:00</b>
    <h3>Title2</h3> <i>Some text</i></li>
  <li><b>14:00</b>
    <h3>Title3</h3>
  </li>
</ul>

    find - 在已选择的元素中搜索元素。

    contains - 匹配包含字符串text的元素。区分大小写。

    closest - 对于每个选定元素，closest() 将在以下元素中搜索最接近的匹配元素：选定元素本身、其父元素、祖父元素等，直至 DOM 树的顶部。

    • 3

  2. 逻辑和谷歌上的十分钟。
    但是在这里，他们使我相信即使在这样的事情上也有必要提供帮助，因此：

    let links = {
  "Title1": "link1",
  "Title2": "link2",
  "Title3": "link3"
};

// Ищем все заголовки (h3) в списке
Array.from(document.querySelectorAll('.list h3')).forEach(e => {
  // Если значение заголовка (Title3, например) есть в карте
  if(e.innerText in links){
    // То создаём ссылку с нужными параметрами
    let a = document.createElement('A');
    a.href = links[e.innerText];
    a.innerText = 'Read more';
    // И вставляем её в конец родительского li
    e.parentNode.appendChild(a);
  }
});
    <ul class="list">
  <li><b>12:00</b><h3>Title1</h3> <i>Some text</i></li>
  <li><b>13:00</b><h3>Title2</h3> <i>Some text</i></li>
  <li><b>14:00</b><h3>Something</h3></li>
  <li><b>14:00</b><h3>Title3</h3></li>
</ul>

    • 2

相关问题