Question

当用户点击链接时。我试图按类找到最接近的跨度值，然后获取该类文本。目前它只是返回空文本：

这是HTML：

<div class="plan recommended">
    <div class="recommended-badge"><span>DOUBLE DATA</span></div>

    <div data-equalizer-listener="plan-heading" class="plan-header">
        <div class="prices">
            <div class="col total">
                <div class="price"><sup>$</sup> <span class="amount">85</span> <span class="caption">per month</span></div>
            </div>

            <p class="min-payment">Min. Total Cost is $2,040 over 24 months.</p>
        </div>
    </div>

    <div class="features">
        <div class="feature included_data PO_Included_Data standard first" data-equalizer-selector="PO_Included_Data" style="height: 247px;">
            <div class="description"><span class="highlight-text">28GB TOTAL DATA</span><br>
                <span class="legal">Includes 14GB + 14GB bonus data for 24 mths<br>
New and recontracting services only<br>
Offer ends 15/04/18<br>
$10 per extra 1GB</span></div>

            <div class="more-data-info hide" data-information="included-data"><strong>Data Pool -</strong> Combine any of our latest My Plan Plus (including SIM Only) and My Mobile Broadband Plus plans on the one bill to pool and share the data.</div>

            <div><a href="#" class="more-data-link" data-information="included-data" tabindex="0">more</a></div>
        </div>

    </div>
</div>

和我的javascript

因此，当有人点击a href并class="more-data-link"时，我希望找到class="amount"的范围并获取其文字

$(".more-data-link").on("click", function(event) {
  event.preventDefault();
  var x = $(this).closest('plan-header').find('.price').find('.amount').text();
  console.log(x);
});

Answer 1

请使用此fiddle

＆＃13;

protected void Button111_Click(object sender, EventArgs e)
{

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["mycon"].ToString());
string month=System.DateTime.Now.toString("dd-MMM");// every month it has to be changed..
string backupDIR = "C:\backup";
if(month!="")
{
   if (!System.IO.Directory.Exists(backupDIR))
   {
    System.IO.Directory.CreateDirectory(backupDIR);
}
try
{
    con.Open();
    sqlcmd = new SqlCommand("backup database iporma to disk= '" + backupDIR + "\" + "Month.ToString()" + ".Bak'", con);
    sqlcmd.ExecuteNonQuery();
    con.Close();
    lblError.Text = "Completed";


}

catch (Exception ex)
{
    lblError.Text = "Error" + ex.ToString();
}
 }
}

＆＃13;

$(".more-data-link").on("click", function(event) {
  event.preventDefault();
  var x = $(this).closest('.plan.recommended').find('.plan-header .price .amount').text();
  console.log(x);
});

＆＃13;

您需要选择父级（推荐计划）类，然后找到其子级...

Answer 2

我检查您的脚本并在其中发现一些错误，使用fetch('https://api.aes/latest') .then(response => { return response.json(); }) .then(json => { this.setState({ launchData: json, });代替innerHtml，text()应为closest('plan-header')。但可能是你没有得到正确的结果，因为它将搜索父母div而不是查询链接https://www.w3schools.com/jquery/traversing_closest.asp

您可以使用最简单，最好的方法来创建更多数据链接的属性并在其中保存金额值并使用以下代码。

closest('.plan-header')

Answer 3

对于那些寻求没有jquery的解决方案的人（click事件中的逻辑与Sarvan Kumar所描述的相同）：

window.onload = function(){
    for(var tL=document.querySelectorAll('.more-data-link'), i=0, j=tL.length; i<j; i++){
        tL[i].onclick = function(){
            var tE = function fA(e){return !e || (e.className && e.className.indexOf('plan') !== -1 && e.className.indexOf('recommended') !== -1) ? e && e.querySelector('.amount') : fA(e.parentNode)}(this);
            console.log(tE ? tE.textContent : '404')
        }
    }
}

Answer 4

 $(".more-data-link").on("click", function(event) { 
      event.preventDefault(); 
      var x = $(this).closest('.plan-header').find('.amount').text(); 
      console.log(x); 
 });

修正了它。你不需要使用第二个发现而你错过了一个点

如何逐个点击获得最接近的跨度值

4 个答案: