-5

I'm trying to add a class to a single div (or multiple, depending on what the search results return) however the code I have below is adding the class to all of the .price.full divs on the page, rather than just applying to the one(s) that matches the :has. 

jQuery(document).ready(function() {
    jQuery('.price.full p.price:has(small)').closest('.price.full').addClass('price-enquiry');
});

The HTML

    <div class="price-rating">

    <span class="price full price-enquiry">
        <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">

            <p class="price"><small>+44 (0) 1395<br> 444099</small></p>

            <meta itemprop="price" content="0">
            <meta itemprop="priceCurrency" content="GBP">
            <link itemprop="availability" href="http://schema.org/InStock">

        </div>

    </span>
    <div class="product-codes">
        <span class="oe-code">
            OE Code: 82-5323/4          
        </span><!-- .oe-code -->
        <span class="sku">
            SKU: MG41           
        </span>
    </div><!-- .product-codes -->
</div>
Nikki Mather
  • 1,118
  • 3
  • 17
  • 33
  • Your jQuery seems fine. We need to see the HTML in order to diagnose the issue – Rory McCrossan Mar 17 '17 at 12:51
  • You're asking about DOM selection but not showing us what the page looks like. Makes it pretty tough to help. –  Mar 17 '17 at 12:51
  • `jQuery('.price.full p.price').has('.small')` – Roelant Mar 17 '17 at 12:51
  • The page must have `` elements, otherwise the selector would have failed entirely instead of matching all `.price.full` elements –  Mar 17 '17 at 12:56
  • `jQuery('foo bar').closest('foo')` can be simplified to just `$('bar').closest('foo')`. – Fabian Klötzl Mar 17 '17 at 12:57
  • @FabianKlötzl simplified, but that's not the same logic. Now it will match all `bar` elements, instead of only those inside the `foo` element – Rory McCrossan Mar 17 '17 at 12:58
  • @RoryMcCrossan: It does end up being logically the same. The latter has the same discriminating effect as the former because of `.closest('foo')`. –  Mar 17 '17 at 13:05
  • @RoryMcCrossan CSS Selectors are right-to-left: http://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left Also, see [fiddle](https://jsfiddle.net/xeawb1xz/). – Fabian Klötzl Mar 17 '17 at 13:07
  • Added the HTML markup – Nikki Mather Mar 17 '17 at 13:10
  • @FabianKlötzl you're right - my bad – Rory McCrossan Mar 17 '17 at 13:10
  • 1
    Where are the `small` elements? Why are you posting PHP when you're asking about client-side DOM selection? –  Mar 17 '17 at 13:11
  • I've added the small element, I edited the post too soon. You can ignore the PHP, can you not? – Nikki Mather Mar 17 '17 at 13:13
  • 1
    Now you have `` but no `

    `.

     – Fabian Klötzl Mar 17 '17 at 13:13
  • @NikkiMather: Sure I can ignore the PHP but I can't predict what will take its place. Now you posted a DOM that will produce a single match, but you're complaining about false positives? Where are the false positives coming from? Or is that the false positive you're showing? –  Mar 17 '17 at 13:14
  • Well I made a mess of this post. I've added the HTML, removed the PHP. The HTML posted above is the one's that SHOULD match, the false positives simply don't have the small element in the markup. – Nikki Mather Mar 17 '17 at 13:16
  • 1
    You need to verify that your example actually represents the problem before you post it rather than just throwing some code in the post. Even now, there's no demonstration of any issue. How does it help to show us the one that is working properly and not the ones that are giving trouble? –  Mar 17 '17 at 13:20
  • So the `.price.full` that should be given the class of `price-enquiry` is those that have a small element inside `.price-full`, if it doesn't, then the class shouldn't be applied to the parent `.price.full`. I hope that makes sense. – Nikki Mather Mar 17 '17 at 13:46
  • @NikkiMather: Yes, we all understand that. But you're saying that some `.price.full` elements are wrongly getting that class but for some reason you're refusing to provide an example of this problem. You've only shown us code that works properly. It's like someone with two cars complaining that one doesn't work but then bringing the other, working car to the mechanic. –  Mar 17 '17 at 13:59
  • Sorry, I'm not too sure what I'm supposed to be providing. There are multiple repetitions of the HTML I've mentioned in my original post, the only difference being some of them won't have the small element in the mix. My code applies the `.price-enquiry` to every div, not just the one's that have the small elements which is the outcome I wanted. – Nikki Mather Mar 17 '17 at 14:04
  • @NikkiMather: Provide a minimal set of HTML that, when your JS code is applied, produces a result that includes elements that should not be included. It should be such that when we run your code, we can see the problem you're describing. –  Mar 17 '17 at 14:22

1 Answers1

-2

:has(small), don't you mean :has(.small)?

Your selector says your looking for a p.price in .price.full that has an element with the tagname small.

I agree with the others on showing the full html for getting the right answer.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
HerrWalter
  • 622
  • 1
  • 5
  • 13