如何从第一个获得<href锚标题<span>...仅？</span>

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

这是

修复

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>

Answer 2

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

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

请参阅下面的 compelete 示例

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>