5 ms·

how's browser support for something like "a:has(img[src$='.gif'])" though?

by gfody 4y ago

zeven7 4y ago
You probably shouldn't be making that query, unless you're doing something specific like web scraping and don't have control over the content of the site.
- cptskippy 4y ago
  That's always been the blessing and curse with JQuery. It allows you to easily filter objects but it doesn't encourage efficiency. A lot of people don't have control over the content of their site in enterprise situations. If you're stuck using an old framework or CMS you could be beholden to someone else. And at the same time there's a lot of devs who dgaf and just ship what works.
- gfody 4y ago
  you could be using it already w/jquery though and if you just switched to the native selector it would stop working everywhere but safari. "#some_combo:has(option:selected[value=..]) + .." seems like a reasonable way to conditionally target something to me, is it terribly worse than some other way?
  - zeven7 4y ago
    > is it terribly worse than some other way? Yeah, it's fragile and will easily lead to bugs when someone changes the markup without realizing it's going to break some crazy selector in another part of the code. It would make a lot more sense to just add a class to the element you're trying to select.
    - gfody 4y ago
      it's a conditional select, you're saying just add code to add/remove a class to the target - of course, but that defeats the point of wanting a conditional selector in the first place
      - zeven7 4y ago
        The point of selecting an element is to do something with it. How does selecting it by class defeat the point? Look, if you need this for some one off thing and you've determined it's the best way to do it in this special case, it's not hard to create a function that will find the element you want. It's not a good argument for using jQuery IMO, because if you're doing this regularly there's probably a better way to do it. But coming soon™ you will be able to do even this with `document.querySelector`. Edit: I didn't pay close attention to your second example. I was speaking mostly related to the a:has example before. Your second example seems to be something that would be desired more in CSS than JS, and I don't think it's unreasonable to do that in CSS. If you need to do it in JS you can workaround browser limitations just fine by writing more than one line of code to do the selection and test the condition.
    - pineconewarrior 4y ago
      That selector does not seem fragile at all. It selects any anchor elements with gifs in them. A lot of the time we can't change the markup, either.
easrng 4y ago
:has doesn't exist but you can do [].map.call(document.querySelectorAll("a img[src$='.gif']"), (e)=>e.closest("a")).filter(e=>e)
- robertoandred 4y ago
  :has certainly does exist, but only in Safari. Hopefully Chrome and Firefox will catch up soon.
err4nt 4y ago
For more advanced queries than standard CSS selectors provide, XPath is also supported by every browser and available via document.evaluate() (which is not eval() by the way) https://developer.mozilla.org/en-US/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript https://developer.mozilla.org/en-US/docs/Web/XPath/Introduct...

how's browser support for something like "a:has(img[src$='.gif'])" though?

by gfody 4y ago

how's browser support for something like "a:has(img[src$='.gif'])" though?

You probably shouldn't be making that query, unless you're doing something specific like web scraping and don't have control over the content of the site.

cptskippy 4y ago
That's always been the blessing and curse with JQuery. It allows you to easily filter objects but it doesn't encourage efficiency. A lot of people don't have control over the content of their site in enterprise situations. If you're stuck using an old framework or CMS you could be beholden to someone else. And at the same time there's a lot of devs who dgaf and just ship what works.
gfody 4y ago
you could be using it already w/jquery though and if you just switched to the native selector it would stop working everywhere but safari. "#some_combo:has(option:selected[value=..]) + .." seems like a reasonable way to conditionally target something to me, is it terribly worse than some other way?
- zeven7 4y ago
  > is it terribly worse than some other way? Yeah, it's fragile and will easily lead to bugs when someone changes the markup without realizing it's going to break some crazy selector in another part of the code. It would make a lot more sense to just add a class to the element you're trying to select.
  - gfody 4y ago
    it's a conditional select, you're saying just add code to add/remove a class to the target - of course, but that defeats the point of wanting a conditional selector in the first place
    - zeven7 4y ago
      The point of selecting an element is to do something with it. How does selecting it by class defeat the point? Look, if you need this for some one off thing and you've determined it's the best way to do it in this special case, it's not hard to create a function that will find the element you want. It's not a good argument for using jQuery IMO, because if you're doing this regularly there's probably a better way to do it. But coming soon™ you will be able to do even this with `document.querySelector`. Edit: I didn't pay close attention to your second example. I was speaking mostly related to the a:has example before. Your second example seems to be something that would be desired more in CSS than JS, and I don't think it's unreasonable to do that in CSS. If you need to do it in JS you can workaround browser limitations just fine by writing more than one line of code to do the selection and test the condition.
  - pineconewarrior 4y ago
    That selector does not seem fragile at all. It selects any anchor elements with gifs in them. A lot of the time we can't change the markup, either.

easrng 4y ago

:has doesn't exist but you can do [].map.call(document.querySelectorAll("a img[src$='.gif']"), (e)=>e.closest("a")).filter(e=>e)

robertoandred 4y ago
:has certainly does exist, but only in Safari. Hopefully Chrome and Firefox will catch up soon.

err4nt 4y ago

For more advanced queries than standard CSS selectors provide, XPath is also supported by every browser and available via document.evaluate() (which is not eval() by the way) https://developer.mozilla.org/en-US/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript https://developer.mozilla.org/en-US/docs/Web/XPath/Introduct...