包含特定类的div的jquery选择器

Question

I'm trying to select the DIV of the first row in the offers table on this page that is shipped by Amazon Prime.

http://www.amazon.co.uk/gp/offer-listing/B00NMND7AW/?condition=new

So in this example the row I'm trying to select with jQuery is the one that is £25.19

I have tried the following:

div.olpOffer .a-icon-prime:first

This gets me only so far. Now I need to figure out how to select the div that contains that.

I need to be able to paste this into the Selector Gadget plugin for Chrome and it should select the div that contains the cheapest Amazon Prime item.

Answer 1

It sounds like you are looking for the :has() selector :

$('.olpOffer:has(.a-icon-prime):first');

This will select the first .olpOffer element that has an element with a class of .a-icon-prime .

Answer 2

I suggest

$(".supersaver").closest("div.olpOffer")

It selects the row:

 <div class="a-row a-spacing-mini olpOffer"> <div class="a-column a-span2"> <span class="a-size-large a-color-price olpOfferPrice a-text-bold"> £25.19 </span> <span class="a-color-price"> </span> <span class="supersaver"><i class="a-icon a-icon-prime" aria-label="Amazon Prime TM"><span class="a-icon-alt">Amazon Prime TM</span> </i> </span> <p class="olpShippingInfo"> <span class="a-color-secondary"> Eligible for FREE UK Delivery <a href="/gp/help/customer/display.html/ref=mk_gship_olp?ie=UTF8&amp;nodeId=200039400&amp;pop-up=1" target="SuperSaverShipping" onclick="return amz_js_PopWin('/gp/help/customer/display.html/ref=mk_gship_olp?ie=UTF8&amp;nodeId=200039400&amp;pop-up=1','SuperSaverShipping','width=550,height=550,resizable=1,scrollbars=1,toolbar=0,status=0');">Details</a> </span> </p> </div> <div class="a-column a-span3"> <div class="a-section a-spacing-small"> <span class="a-size-medium olpCondition a-text-bold"> New </span> </div> </div> <div class="a-column a-span2 olpSellerColumn"> <h3 class="a-spacing-none olpSellerName"> <img alt="Amazon.co.uk" src="http://ecx.images-amazon.com/images/I/01pSGAIMN3L.gif" width="90" height="19"> </h3> </div> <div class="a-column a-span3 olpDeliveryColumn"> <p class="a-spacing-mini olpAvailability"> </p> <ul class="a-vertical"> <li class="olpFastTrack"><span class="a-list-item"> In stock. <span id="ftm_us7UeOB4c9pZTmqq2Md4WubIlhxKT3k9uiwFnsOOTz6eaIxF2ReWmql9mIaXr5EWHB9hdFWHF3jDdpJB7I6iPIEhJZbrPX5z">Want delivery by Thursday, 3 December? <span id="shippingMessage_ftinfo_olp_1">Order it in the next <span id="ftc_us7UeOB4c9pZTmqq2Md4WubIlhxKT3k9uiwFnsOOTz6eaIxF2ReWmql9mIaXr5EWHB9hdFWHF3jDdpJB7I6iPIEhJZbrPX5z" style="color: #006600;">19 hours and 10 minutes</span>, and choose <b>One-Day Delivery</b> at checkout. </span> <a href="/gp/help/customer/display.html/ref=ftinfo_olp_1?ie=UTF8&amp;nodeId=200275230&amp;pop-up=1" target="_blank" onclick="return amz_js_PopWin('/gp/help/customer/display.html/ref=ftinfo_olp_1?ie=UTF8&amp;nodeId=200275230&amp;pop-up=1','_blank','width=750,height=600,resizable=1,scrollbars=1,toolbar=1,status=1');">See details</a> </span> </span> </li> <li><span class="a-list-item"> <a href="/gp/help/customer/display.html/ref=olp_merch_ship_1?ie=UTF8&amp;nodeId=492868">Domestic delivery rates</a> and <a href="/gp/help/customer/display.html/ref=olp_merch_return_1?ie=UTF8&amp;nodeId=502480">return policy</a>. </span> </li> </ul> <p></p> </div> <div class="a-column a-span2 olpBuyColumn a-span-last"> <div class="a-button-stack"> <form method="post" action="/gp/item-dispatch/ref=olp_atc_new_1" class="a-spacing-none"> <input type="hidden" name="session-id" value="275-2613291-9295018"> <input type="hidden" name="qid"> <input type="hidden" name="sr"> <input type="hidden" name="signInToHUC" value="0" id="signInToHUC"> <input type="hidden" name="metric-asin.B00NMND7AW" value="1"> <input type="hidden" name="registryItemID.1"> <input type="hidden" name="registryID.1"> <input type="hidden" name="itemCount" value="1"> <input type="hidden" name="offeringID.1" value="us7UeOB4c9pZTmqq2Md4WubIlhxKT3k9uiwFnsOOTz6eaIxF2ReWmql9mIaXr5EWHB9hdFWHF3jDdpJB7I6iPIEhJZbrPX5z"> <input type="hidden" name="isAddon" value="0"> <span class="a-declarative" data-action="olp-click-log" data-olp-click-log="{&quot;subtype&quot;:&quot;main&quot;,&quot;type&quot;:&quot;addToCart&quot;}"> <span class="a-button a-button-normal a-spacing-micro a-button-primary a-button-icon" id="a-autoid-6"><span class="a-button-inner"><i class="a-icon a-icon-cart"></i><input name="submit.addToCart" class="a-button-input" type="submit" value="Add to Basket" aria-labelledby="a-autoid-6-announce"><span class="a-button-text" aria-hidden="true" id="a-autoid-6-announce"> Add to Basket </span></span> </span> </span> </form> <div class="a-section a-spacing-micro a-text-center"> or </div> <p class="a-spacing-none a-text-center olpSignIn"> <a href="https://www.amazon.co.uk/gp/product/utility/edit-one-click-pref.html/ref=olp_offerlisting_1?ie=UTF8&amp;returnPath=%2Fgp%2Foffer-listing%2FB00NMND7AW">Sign in</a> to turn on 1-Click ordering. </p> </div> </div> </div>