jQuery -不能选择第三个子元素

Question

如标题所述，由于某些原因，jQuery不选择第三个子节点。当我瞄准第一和第二个子元素时，这个问题不会发生。我想隐藏一段以"礼物援助立法"开头的文字

有什么排序的方法吗?

HTML

<div class="pmpro_checkout-fields custom">
<p>
You have selected the <strong>Non-Member</strong> membership level.
</p>
<p>Need Text</p>
<div id="pmpro_level_cost">
<p>The price for membership is <strong>£0.00</strong> now.</p>
</div>
<br>
<span style="margin-top: -25px; display: block">
Details required on this form will also appear in the Directory Listing. Please read below. *Information required
</span>
<hr>
<h3>Gift Aid</h3>
<p>Gift Aid legislation allows us to reclaim 25p of tax on every £1 that you give on your subscription and additional donations. It won't cost you any extra.</p>
<input type="checkbox" id="gift_aid" name="gift_aid" value="1">
<label class="pmpro_normal pmpro_clickable" for="gift_aid">
Allow Gift Aid to be collected?
</label>
<hr>
</div>

Jquery

$( ".pmpro_checkout-fields h3" ).hide();
$(".pmpro_checkout-fields p:nth-child(3").hide();

Answer 1

$(";pmpro_checkout-fields p: nth-child(3")hide ();我猜是语法问题$("。pmpro_checkout-fields p: nth-child(3)"hide ();

Answer 2

首先，Cbroe在注释中提到的方法将使您工作:

$(".pmpro_checkout-fields p:nth-of-type(3)").hide();

但是，从长远来看，我不推荐这种方法(手动索引表单中的元素位置)，因为它很脆弱。只要在目标之前添加另一个<p>元素，事情就会中断。如果重构它，事情可能会悄无声息地中断。一种更标准的方法是用ID将div或span中应该消失的元素包围起来，然后在jQuery中定位该ID，这样它就会始终工作，只要您不更改ID:

HTML片段:

<div class="pmpro_checkout-fields custom">
...
<hr>
<div id="giftAid">
<h3>Gift Aid</h3>
<p>Gift Aid legislation allows us to reclaim 25p of tax on every £1 that you give on your subscription and additional donations. It won't cost you any extra.</p>
<input type="checkbox" id="gift_aid" name="gift_aid" value="1">
<label class="pmpro_normal pmpro_clickable" for="gift_aid">
Allow Gift Aid to be collected?
</label>
<hr>
</div>
</div>

jQuery代码段来替换你的两个:

$("#giftAid").hide();

这也是一种更具可读性和可维护性的方法。当然，我认为你的最终目的是完全基于某种逻辑隐藏礼物援助部分。但如果你真的只想隐藏header和P元素，只需使用" gifaid "将其他元素移出div标签即可。id。