使用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>