如何获得<a href="" anchor="" title="" from="" the="" first="" <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

您可以在锚标记中找到span元素并获取第一个这样的

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

请参阅下面的竞争示例

＆＃13;

＆＃13;

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


});


});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是修复

＆＃13;

＆＃13;

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());});
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;