javascript - 如何按类别点击获得最接近的跨度值

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

所以当有人点击带有 class="more-data-link" 的 a href 时，我想找到带有 class="的 span 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

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

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

您需要选择父类(推荐计划)，然后找到它的子类...