查找確定<span>和容器元素

的HTML看起來像這樣在插入ID：查找確定<span>和容器元素

<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並添加一個ID到<a>包含它。

這是可以使用JavaScript嗎？我嘗試過不同的方法，但無法讓它工作。

來源

2016-06-23 Alejandro Fernández

你這是什麼想要在哪裏？ –

使用'document.QuerySelectorAll（「a.linkname」）'來查找所有鏈接，遍歷列表，使用'element.innerHTML'獲取內容，並使用'element.id =「newID」'來分配ID。 – Barmar

你正在尋找一個普通的JS解決方案或jQuery？另外，你有什麼嘗試？ – j08691

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 
    } 
}

來源

2016-06-23 22:26:35

你打算在這裏要做的是首先按類document.getElementsByClassName('branded-page-box search-pager spf-link')[0]選擇你的主容器，然後找到其中的所有鏈接元素。循環瀏覽鏈接並找到內容與您的搜索匹配的內容，並將其父母的ID設置爲您的自定義ID。

例子：

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 
 
    } 
 
}

#your_custom_id { 
 
    background: red; 
 
}

<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>

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

來源

2016-06-23 22:34:00 TheZanke

既然你可能不希望從字面上找CONTENT3，你可以通過第三個實例進行過濾和選擇內部HTML並將其應用到像這樣的鏈接id，https://jsfiddle.net/6cge9rLb/2/

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

來源

2016-06-23 22:59:34

查找確定<span>和容器元素

回答

相關問題