使用ajaxget加载html,然后通过标签查找具体内容

Load html using ajax get, then find specific content by tag

我试图在 HTML 中找到特定的 URL 我正在通过 AJAX get 加载。

我尝试使用下面的代码,但它 returns 未定义

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

下面是 html - 我正在尝试获取 href

中的 url
<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>

我认为你需要这样做,以防你需要 "Français" 字符串。

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

我认为你需要这样做,以防你需要 url 属性。

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

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

其次,~ 运算符是一般的兄弟选择器,在这里不合适,因为 a 不是 #wb-bnr 的兄弟选择器。您可以将其删除。

最后,要获得 URL,您需要获得 href 属性,而不是元素的文本。试试这个:

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

你可以这样试试

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

您不必使用同级 select 或。

$( "prev ~ siblings" ) 用于 select 所有跟在 "prev" 元素之后的兄弟元素,具有相同的父元素,并匹配过滤 "siblings" select或者。 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>