使用ajax加载html get，然后通过标签查找特定内容

Question

我试图在通过AJAX获取的HTML中查找HTML中的特定URL。

我已经尝试使用下面的代码，但它返回undefined

var url_f_elem = $(html).find(".wb-bnr ~ a").html(); 

的HTML低于 - 我试图获取里面的A HREF

<header role="banner"> 
<div id="wb-bnr" class="container"> 
    <section id="wb-lng" class="visible-md visible-lg text-right"> 
    <h2 class="wb-inv">Language selection</h2> 
    <div class="row"> 
     <div class="col-md-12"> 
      <ul class="list-inline margin-bottom-none"> 
       <li> 
        <a lang="fr" href="/fr/ministere-defense-nationale/nouvelles/2017/09/la_construction_dunnouveaubatimentamelioreralentretiendevehicule.html"> 
         Français 

        </a> 
       </li> 

      </ul> 
     </div> 
    </div> 
</section> 

Answer 1

首先wb-bnr是元素，而不是class的id，所以你应该使用#wb-bnr。

其次，~运营商是一般的兄弟选择器，这是不适合在这里，因为a不是#wb-bnr的兄弟姐妹。你可以删除它。

最后，要获取URL，您需要获取href属性，而不是元素的文本。试试这个：

var url_f_elem = $(html).find("#wb-bnr a").attr('href'); 

Answer 2

我认为你需要的网址要做到这一点，以防你需要“Français”字符串。

var url_f_elem = $('#wb-bnr').find('a').html().trim(); 

我认为你需要这样做，以防你需要的URL attr。

var url_f_elem = $('#wb-bnr').find('a').attr('href'); 

Answer 3

你可以尝试这样的

$(html).find("#wb-bnr a").attr('href'); 

你不必使用兄弟选择。

$（“prev〜siblings”）用于选择在“prev”元素之后跟随的所有同胞元素，具有相同的父级，并与筛选“同级”选择器匹配。 https://api.jquery.com/next-siblings-selector/

示例代码段：

var url_f_elem = $('body').find("#wb-bnr a").attr('href'); 
 
console.log(url_f_elem);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header role="banner"> 
 
<div id="wb-bnr" class="container"> 
 
    <section id="wb-lng" class="visible-md visible-lg text-right"> 
 
    <h2 class="wb-inv">Language selection</h2> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <ul class="list-inline margin-bottom-none"> 
 
       <li> 
 
        <a lang="fr" href="/fr/ministere-defense-nationale/nouvelles/2017/09/la_construction_dunnouveaubatimentamelioreralentretiendevehicule.html"> 
 
         Français 
 

 
        </a> 
 
       </li> 
 

 
      </ul> 
 
     </div> 
 
    </div> 
 
</section>