How to get <a href anchor title from the first <span>…</span> only?

Question

I have a html string that want to get a anchor title from the first span ONLY but my current code gives me the text for both span(file name and file size span).Could you guys help me get the title from the first span only(file name span)?Thanks.

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

You can find the span elements in the anchor tag and get the first one like this

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

see the compelete example below

 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

Here is the fix

 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>