jquery selector for div that contains specific class

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

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>

Answer 2

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.