Stack Overflow Asked by sys73r on December 2, 2021
I’m trying to read inside a class the UL and then a LI element which contains links but the data to create the URL to finally download the files is separated.
The LI element contains an ID and the <a href title contains the filename, so I’m trying to first get all the LI elements inside the class but I can’t find a way to associate/read each LI ID with the corresponding A HREF TITLE.
This is part of a chrome extension
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
//this no longer works..
if (request.message == "getLinks") {
var links = [];
$("a").each(function(i, el) {
links.push({ "url": el.href, "description": $(el).text() });
});
chrome.runtime.sendMessage({ "message": "links", "links": links });
//TESTING HERE. so I can create a link to download
const listItems = document.querySelectorAll('.view-items li');
for (let i = 0; i < listItems.length; i++)
{
alert (listItems[i].id);
const urlTitle = document.querySelectorAll('.view-name a');
for (let k = 0; k < urlTitle.length; i++)
{
alert (urlTitle[i].title);
}
}
}
});
html reduced code
<ul class="view-items">
<li id="VBGC00" class="view-item>
<a href="#" title="my-file-name-to-download" class="text_button>my-file-name-to-download.pdf</a>
full li code
<li id="VBGC75"
class="view-item view-table-row skipTarget aa-fileRead"
file-label="File my-file-to-download.docx Version 2 129 KB Type docx Updated yesterday at 6:41 PM by you"
role="listitem" aria-describedby="contextMenuHelp"> <div class="scs-progress-bar"></div>
<div class="view-table-row-content" file-label="File my-file-to-download.docx Version 2 164 KB Type docx Updated yesterday at 6:41 PM by you" role="group">
<span class="view-check custom-checkbox"><span class="ui-checkbox ui-widget"><input type="checkbox" title="Select my-file-to-download.docx" tabindex="-1">
<span class="ui-checkbox-icon"></span></span></span> <span class="view-table-cell name-and-desc-cell rowView compact cv-table-col-0" style="flex: 1 1 auto; min-width: 0px;">
<span class="view-thumbnail"><span class="thumbWrapper view-thumbClick "> <span class="view-icon" title="my-file-to-download.docx">
<img src="http://localhost/img/icon.png" alt="View my-file-to-download.docx"></span> </span></span>
<span class="view-content-area noDescription">
<span class="view-textarea1">
<span class="view-name">
<span>my-file-to-download.docx</span>
<a href="#" title="my-file-to-download.docx" file-label="my-file-to-download.docx" class="text_button view-openClick ui-draggable ui-draggable-handle" tabindex="-1">my-file-to-download.docx</a>
</span> </span> <span class="view-textarea2">
<span class="view-description" title=""></span> </span> </span></span>
<span class="view-table-cell cv-table-cell-value cv-table-col-1" title="v2" style="width: 60px; flex: 0 0 auto;">v2</span>
<span class="view-table-cell cv-table-cell-value cv-table-col-2" title="Yesterday at 6:41 PM" style="width: 150px; flex: 0 0 auto;">Yesterday at 6:41 PM</span>
<span class="view-table-cell cv-table-cell-value owner cv-table-col-3" title="You" style="width: 180px; flex: 0 0 auto;">You</span>
<span class="view-table-cell cv-table-cell-value cv-table-col-4" title="164 KB" style="width: 100px; flex: 0 0 auto;">164 KB</span><span class="view-table-cell flex cv-table-col-5" style="width: 100px; flex: 0 0 auto;">
<span class="view-capsule-text" title="docx">docx</span></span><span class="view-table-cell actions-cell rowView compact cv-table-col-6" style="width: 205px; flex: 0 0 auto;">
<span class="view-buttons"> <span class="view-indicator"><span class="ui-icon ui-icon-lock folderview-reserved" title=""></span></span>
<span class="view-table-con-action"><span class="view-action folderview-con-pinned never-text hidden">
<button class="view-item-button view-openClick conversationType ws-toolbar-button ui-draggable ui-draggable-handle" title="file-assoc" file-label="file-assoc" tabindex="-1" style="display: none;"><span class="ui-icon ui-icon-con"></span></button></span></span>
<span class="view-action"> <button class="view-item-button folderview-download-button ws-toolbar-button" title="Download" file-label="Download my-file-to-download.docx" tabindex="-1"> <span class="ui-icon ui-icon-athena-download"></span> </button> </span> <span class="view-action action-share-button"> <button class="view-item-button folderview-share-button ws-toolbar-button" title="Share Link" file-label="Share a link to this document" tabindex="-1"> <span class="ui-icon ui-icon-athena-share"></span> </button> </span> <span class="view-indicator"><button class="view-item-button favorite folderview-favorite-button" title="Add to Favorites" file-label="Add my-file-to-download.docx to Favorites" tabindex="-1">
<span class="ui-icon favorite star"></span></button></span></span></span></div>
</li>
This is the url i need to create: https://myhost/files/VBGC00/my-file-name-to-download.pdf
any suggestions?
thanks!
// declaring an empty array to contain all the built urls
var array_of_urls = [];
var all_li = document.getElementsByClassName("view-item");
for (var i = 0; i < all_li.length; i++)
{
// get the needed id
var id = all_li[i].getAttribute("id");
// get the filename
var file_to_download = all_li[i].childNodes[1].getAttribute("title");
// build the link
var new_url = "https://myhost/files/"+id+"/"+file_to_download+".pdf";
array_of_urls.push(new_url); // push the URL in an array
// if you need to put the each built link in its relative href
all_li[i].childNodes[1].setAttribute("href", new_url);
}
console.log(array_of_urls); // dislay all the built URL
<ul class="view-items">
<li id="VBGC00" class="view-item">
<a href="#" title="my-file-name-to-download" class="text_button>my-file-name-to-download.pdf"> link 0 </a>
</li>
<li id="VBGC01" class="view-item">
<a href="#" title="my-file-name-to-download-1" class="text_button>my-file-name-to-download.pdf"> link 1 </a>
</li>
<li id="VBGC02" class="view-item">
<a href="#" title="my-file-name-to-download-2" class="text_button>my-file-name-to-download.pdf"> link 2 </a>
</li>
</ul>
Answered by Nouristas on December 2, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP