如何獲得<a href anchor title from the first <span>……而已？</a>

Question

我有一個html字符串，只想從第一個跨度獲取錨標題，但是我當前的代碼為我提供了跨度的文本（文件名和文件大小跨度）。你們能幫我從第一個跨度獲取標題嗎（文件名跨度）？謝謝。

https://jsfiddle.net/un3b55m6/

var htmlString = '<ul class="training-files">'+
'                <li role="display">'+
'                        <a target="_blank" href="/request/a/b/c/d/123456" role="link" class="class-file clean la" item-la-action="click" item-la-label="tab-trainings-item" item-la-value="123456">'+
'               <span class="file-name">Training_new_season_123456.zip</span>'+
'               <span class="file-size">(20.5MB)</span>'+
'           </a>'+
'       </li>'+
'       <li role="display">'+
'           <a target="_blank" href="/request/a/b/c/d/123457" role="link" class="class-file clean la" item-la-action="click" item-la-label="tab-trainings-item" item-la-value="123457">'+
'               <span class="file-name">Training_new_season_123457.zip</span>'+
'               <span class="file-size">(10.2KB)</span>'+
'           </a>'+
'       </li>'+
'</ul>';



$($.parseHTML(htmlString)).each(function() {

$(this).find("a").each(function() {

var parent = $(this).parent();


alert("url:"+parent.find("a").attr("href")+" =>filename:"+parent.find("a").text());



});


});

Answer 1

您可以在anchor標簽中找到span元素，並獲得第一個這樣的元素

let firstSpanText = $(this).find('span').first().text(); console.log(firstSpanText);

見下面的例子

 var htmlString = '<ul class="training-files">'+ ' <li role="display">'+ ' <a target="_blank" href="/request/a/b/c/d/123456" role="link" class="class-file clean la" item-la-action="click" item-la-label="tab-trainings-item" item-la-value="123456">'+ ' <span class="file-name">Training_new_season_123456.zip</span>'+ ' <span class="file-size">(20.5MB)</span>'+ ' </a>'+ ' </li>'+ ' <li role="display">'+ ' <a target="_blank" href="/request/a/b/c/d/123457" role="link" class="class-file clean la" item-la-action="click" item-la-label="tab-trainings-item" item-la-value="123457">'+ ' <span class="file-name">Training_new_season_123457.zip</span>'+ ' <span class="file-size">(10.2KB)</span>'+ ' </a>'+ ' </li>'+ '</ul>'; $($.parseHTML(htmlString)).each(function() { $(this).find("a").each(function() { var parent = $(this).parent(); let firstSpanText = $(this).find('span').first().text(); console.log(firstSpanText); alert("url:"+parent.find("a").attr("href")+" =>filename:"+firstSpanText); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

這是解決方法

 var htmlString = '<ul class="training-files">'+ ' <li role="display">'+ ' <a target="_blank" href="/request/a/b/c/d/123456" role="link" class="class-file clean la" item-la-action="click" item-la-label="tab-trainings-item" item-la-value="123456">'+ ' <span class="file-name">Training_new_season_123456.zip</span>'+ ' <span class="file-size">(20.5MB)</span>'+ ' </a>'+ ' </li>'+ ' <li role="display">'+ ' <a target="_blank" href="/request/a/b/c/d/123457" role="link" class="class-file clean la" item-la-action="click" item-la-label="tab-trainings-item" item-la-value="123457">'+ ' <span class="file-name">Training_new_season_123457.zip</span>'+ ' <span class="file-size">(10.2KB)</span>'+ ' </a>'+ ' </li>'+ '</ul>'; $($.parseHTML(htmlString)).each(function() { $(this).find("a").each(function() { var parent = $(this).parent(); alert("url:"+parent.find("a").attr("href")+"=>filename:"+parent.find(".file-name").text());}); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>