I've been trying to simplify some code (mostly because its dynamically generated by javascript and the less HTML I have to print, the better) and as such have been taking out a lot of id="" values and instead giving similar elements a class and then using jQuery's powerfull selector methods to access each instance as needed*. This has served me fairly well but I'm kinda stuck right now.
I have an HTML block that looks something this:<div data-id="1">
<div class="the_element_I_want">...</div>
</div>
<div data-id="2">
<div class="the_element_I_want">...</div>
</div>
and I want to select the child element (by class) of a given parent (by attribute, namely "data-id")
I had this and thought it was working:$('.the_element_I_want, [data-id=1]')
but when I started adding more div's with more data-id attributes I realized I wasn't selecting the specific child but all the elements with that class.
Any thoughts on how I can accomplish this?
*I know that this creates a bit more overhead for javascript and isn't as fast as accessing an element by ID, but the difference is miniscule compared to the ease of cleaner HTML (which is being stored in a javascript string).