Question

HTML看起来像这样：

<div class="divname">
    <a href="#" class="linkname" data-sessionlink="" aria-label=""><span class="spanclass">CONTENT1</span></a>
    <a href="#" class="linkname" data-sessionlink="" aria-label=""><span class="spanclass">CONTENT2</span></a>
    <a href="#" class="linkname" data-sessionlink="" aria-label=""><span class="spanclass">CONTENT3</span></a>
</div>

这是一个寻呼机。 YouTube的寻呼机，您可以查看（divname == "branded-page-box search-pager spf-link"）

我需要找到CONTENT3并在包含它的<a>中添加ID。

这可以使用JavaScript吗？我尝试过不同的方法，但无法让它发挥作用。

Answer 1

您要在此处执行的操作是首先按类document.getElementsByClassName('branded-page-box search-pager spf-link')[0]选择主容器，然后找到其中的所有链接元素。循环浏览链接，找到内容与您的搜索匹配的链接，并将其ID的父级ID设置为您的自定义ID。

示例：

＆＃13;

var spans = document.getElementsByClassName('branded-page-box search-pager spf-link')[0].getElementsByClassName('spanclass');

var i, span;

for (i = 0; i < spans.length; i += 1) {
  span = spans[i];

  if (span.innerHTML === 'CONTENT3') {
    span.parentNode.id = 'your_custom_id';
    // break here if you only want to find the first match
  }
}

＆＃13;

#your_custom_id {
  background: red;
}

＆＃13;

<div class="branded-page-box search-pager spf-link">
  <a href="#" class="linkname" data-sessionlink="" aria-label=""><span class="spanclass">CONTENT1</span></a>
  <a href="#" class="linkname" data-sessionlink="" aria-label=""><span class="spanclass">CONTENT2</span></a>
  <a href="#" class="linkname" data-sessionlink="" aria-label=""><span class="spanclass">CONTENT3</span></a>
</div>

＆＃13;

如果您不需要支持IE8或更早版本，您也可以使用var spans = document.querySelectorAll('.branded-page-box.search-pager.spf-link .spanclass');作为第一行。

Answer 2

var links = document.querySelectorAll('.linkname'); // Find all the links

for (var i in links) { // Loop through the links

  var link = links[i]; // Get the current link

  if (link.textContent === 'CONTENT3') { // Check the link's text content
    link.id = 'theChosenOne'; // Add the id if the text content was correct
  }
}

Answer 3

由于您可能不想真正寻找 CONTENT3 ，您可以按第3个实例进行过滤，然后选择内部html并将其应用到链接id，就像这样，{{ 3}}

<script>
$( "span" ).filter(function( index ) {
   if (index === 2){
        var innerText = $( this ).html();
       $(this).parent().attr('id', innerText);
   }
  });
</script>

找到确定的<span>并在容器元素上插入id

3 个答案: