0

I want to select and get the contents of a specific list based on what the 'data-style-name' is of that list. Like how would I choose a certain list if its data-style-name= 'black'

This is the code I have so far but im stuck.

const info = $('.styles').html()
console.log(info)

This is the html it logs so far

<li><button data-url="/shop/jackets/ls0jgz4q1/f3rkyu1ci" class="selected" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204650/ma/dCuUfHzOwYQ.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204650/zo/dCuUfHzOwYQ.jpg&quot;}" data-style-name="Tigerstripe Camo" data-style-id="30982" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Tigerstripe Camo" src="//assets.supremenewyork.com/204650/sw/dCuUfHzOwYQ.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/f3rkyu1ci?alt=0" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204652/ma/vNfOKZ_n-VM.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204652/zo/vNfOKZ_n-VM.jpg&quot;}" data-style-name="Tigerstripe Camo" data-style-id="30982" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Tigerstripe Camo image 1" src="//assets.supremenewyork.com/204652/sw/vNfOKZ_n-VM.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/f3rkyu1ci?alt=1" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204653/ma/CzMuYoXBGkQ.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204653/zo/CzMuYoXBGkQ.jpg&quot;}" data-style-name="Tigerstripe Camo" data-style-id="30982" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Tigerstripe Camo image 2" src="//assets.supremenewyork.com/204653/sw/CzMuYoXBGkQ.jpg"></button></li><li><button data-url="/shop/jackets/ls0jgz4q1/t3i0gnxc9" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204642/ma/7P9KTS4_HEs.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204642/zo/7P9KTS4_HEs.jpg&quot;}" data-style-name="Black" data-style-id="30985" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket 
and back neck tab. "><img width="32" height="32" alt="Black" src="//assets.supremenewyork.com/204642/sw/7P9KTS4_HEs.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/t3i0gnxc9?alt=0" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204644/ma/ndcje1Lw83w.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204644/zo/ndcje1Lw83w.jpg&quot;}" data-style-name="Black" data-style-id="30985" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Black image 1" src="//assets.supremenewyork.com/204644/sw/ndcje1Lw83w.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/t3i0gnxc9?alt=1" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204645/ma/FUYxiNKaZ94.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204645/zo/FUYxiNKaZ94.jpg&quot;}" data-style-name="Black" data-style-id="30985" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Black image 2" src="//assets.supremenewyork.com/204645/sw/FUYxiNKaZ94.jpg"></button></li><li><button data-url="/shop/jackets/ls0jgz4q1/zdb9prchf" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204646/ma/-ns5aQUOKP8.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204646/zo/-ns5aQUOKP8.jpg&quot;}" data-style-name="Dusty Pink" data-style-id="30983" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Dusty Pink" src="//assets.supremenewyork.com/204646/sw/-ns5aQUOKP8.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/zdb9prchf?alt=0" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204648/ma/bwlGwgxnOFI.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204648/zo/bwlGwgxnOFI.jpg&quot;}" data-style-name="Dusty Pink" data-style-id="30983" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and 
hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Dusty Pink image 1" src="//assets.supremenewyork.com/204648/sw/bwlGwgxnOFI.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/zdb9prchf?alt=1" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204649/ma/FXe6_iXvTrY.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204649/zo/FXe6_iXvTrY.jpg&quot;}" data-style-name="Dusty Pink" data-style-id="30983" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Dusty Pink image 2" src="//assets.supremenewyork.com/204649/sw/FXe6_iXvTrY.jpg"></button></li><li><button data-url="/shop/jackets/ls0jgz4q1/uz2ylvwtf" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204638/ma/BzthIEyi19M.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204638/zo/BzthIEyi19M.jpg&quot;}" data-style-name="Slate" data-style-id="30984" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Slate" src="//assets.supremenewyork.com/204638/sw/BzthIEyi19M.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/uz2ylvwtf?alt=0" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204640/ma/CovbZVcxX7s.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204640/zo/CovbZVcxX7s.jpg&quot;}" data-style-name="Slate" data-style-id="30984" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Slate image 1" src="//assets.supremenewyork.com/204640/sw/CovbZVcxX7s.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/uz2ylvwtf?alt=1" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204641/ma/ot_C5KzO5NI.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204641/zo/ot_C5KzO5NI.jpg&quot;}" data-style-name="Slate" data-style-id="30984" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower 
front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Slate image 2" src="//assets.supremenewyork.com/204641/sw/ot_C5KzO5NI.jpg"></button></li>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Brandude12
  • 11
  • $("[data-style-name=black]") – Charlie Bamford Jul 15 '21 at 20:49
  • Does this answer your question? [How do I target elements with an attribute that has any value in CSS?](https://stackoverflow.com/questions/9271424/how-do-i-target-elements-with-an-attribute-that-has-any-value-in-css) – Charlie Bamford Jul 15 '21 at 20:50
  • `$('[data-style-name=Black]')` – Unmitigated Jul 15 '21 at 20:51
  • Please remove extra information from your code that isn't relevant to your question. You will attract higher quality answers if you make it easy for people to understand what you're trying to do. – Charlie Bamford Jul 15 '21 at 20:54
  • It's not at all clear what that line of jQuery is trying to do. If the duplicate listed isn't correct, you'll need to revise your question to be more clear about the problem you're facing. See [ask] and take the [tour]. – isherwood Jul 15 '21 at 20:57

1 Answers1

1

const info = $('[data-style-name="Black"]').parent('li').html()
console.log(info)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><button data-url="/shop/jackets/ls0jgz4q1/f3rkyu1ci" class="selected" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204650/ma/dCuUfHzOwYQ.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204650/zo/dCuUfHzOwYQ.jpg&quot;}" data-style-name="Tigerstripe Camo" data-style-id="30982" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Tigerstripe Camo" src="//assets.supremenewyork.com/204650/sw/dCuUfHzOwYQ.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/f3rkyu1ci?alt=0" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204652/ma/vNfOKZ_n-VM.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204652/zo/vNfOKZ_n-VM.jpg&quot;}" data-style-name="Tigerstripe Camo" data-style-id="30982" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Tigerstripe Camo image 1" src="//assets.supremenewyork.com/204652/sw/vNfOKZ_n-VM.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/f3rkyu1ci?alt=1" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204653/ma/CzMuYoXBGkQ.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204653/zo/CzMuYoXBGkQ.jpg&quot;}" data-style-name="Tigerstripe Camo" data-style-id="30982" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Tigerstripe Camo image 2" src="//assets.supremenewyork.com/204653/sw/CzMuYoXBGkQ.jpg"></button></li><li><button data-url="/shop/jackets/ls0jgz4q1/t3i0gnxc9" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204642/ma/7P9KTS4_HEs.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204642/zo/7P9KTS4_HEs.jpg&quot;}" data-style-name="Black" data-style-id="30985" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket 
and back neck tab. "><img width="32" height="32" alt="Black" src="//assets.supremenewyork.com/204642/sw/7P9KTS4_HEs.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/t3i0gnxc9?alt=0" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204644/ma/ndcje1Lw83w.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204644/zo/ndcje1Lw83w.jpg&quot;}" data-style-name="Black" data-style-id="30985" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Black image 1" src="//assets.supremenewyork.com/204644/sw/ndcje1Lw83w.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/t3i0gnxc9?alt=1" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204645/ma/FUYxiNKaZ94.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204645/zo/FUYxiNKaZ94.jpg&quot;}" data-style-name="Black" data-style-id="30985" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Black image 2" src="//assets.supremenewyork.com/204645/sw/FUYxiNKaZ94.jpg"></button></li><li><button data-url="/shop/jackets/ls0jgz4q1/zdb9prchf" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204646/ma/-ns5aQUOKP8.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204646/zo/-ns5aQUOKP8.jpg&quot;}" data-style-name="Dusty Pink" data-style-id="30983" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Dusty Pink" src="//assets.supremenewyork.com/204646/sw/-ns5aQUOKP8.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/zdb9prchf?alt=0" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204648/ma/bwlGwgxnOFI.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204648/zo/bwlGwgxnOFI.jpg&quot;}" data-style-name="Dusty Pink" data-style-id="30983" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and 
hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Dusty Pink image 1" src="//assets.supremenewyork.com/204648/sw/bwlGwgxnOFI.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/zdb9prchf?alt=1" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204649/ma/FXe6_iXvTrY.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204649/zo/FXe6_iXvTrY.jpg&quot;}" data-style-name="Dusty Pink" data-style-id="30983" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Dusty Pink image 2" src="//assets.supremenewyork.com/204649/sw/FXe6_iXvTrY.jpg"></button></li><li><button data-url="/shop/jackets/ls0jgz4q1/uz2ylvwtf" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204638/ma/BzthIEyi19M.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204638/zo/BzthIEyi19M.jpg&quot;}" data-style-name="Slate" data-style-id="30984" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Slate" src="//assets.supremenewyork.com/204638/sw/BzthIEyi19M.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/uz2ylvwtf?alt=0" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204640/ma/CovbZVcxX7s.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204640/zo/CovbZVcxX7s.jpg&quot;}" data-style-name="Slate" data-style-id="30984" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Slate image 1" src="//assets.supremenewyork.com/204640/sw/CovbZVcxX7s.jpg"></button><button data-url="/shop/jackets/ls0jgz4q1/uz2ylvwtf?alt=1" class="" data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204641/ma/ot_C5KzO5NI.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204641/zo/ot_C5KzO5NI.jpg&quot;}" data-style-name="Slate" data-style-id="30984" data-sold-out="false" data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower 
front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "><img width="32" height="32" alt="Slate image 2" src="//assets.supremenewyork.com/204641/sw/ot_C5KzO5NI.jpg"></button></li>
Charan Kumar
  • 553
  • 2
  • 13