ajax getを使用してhtmlを読み込み、タグで特定のコンテンツを見つけよう

Question

HTMLで特定のURLを検索しようとしています。

私は以下のコードを使用しようとしましたが、それはHTMLは以下の通りです

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

undefinedを返します

- 私は私はあなたが必要だと思うの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を使用する必要があります。

第2に、aは#wb-bnrの兄弟ではないため、~演算子はここでは適切ではない一般的な兄弟セレクタです。あなたはただそれを削除することができます。

最後に、URLを取得するには、要素のテキストではなくhref属性を取得する必要があります。これを試してみてください：

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

Answer 2

内のURLを取得しようとしていますあなたは "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>