<ul class="sellerDetails sellerdetailsData " data-bind="attr: { id: 'sellerdetailsData-' + $index()}">
<li><span class="buyerprocess-sprite seller-name"></span>
<p class="leftfloat">
<span data-bind="attr: { id: 'seller-Person' + $index()}" class="seller-Person">
</span>
<br />
<span data-bind="attr: { id: 'seller-Name' + $index()}" class="seller-Name font13 text-light-grey">
</span>
</p>
</li>
<li><span class="buyerprocess-sprite seller-masking-no"></span>
<p class="leftfloat">
<span data-bind="attr: { id: 'seller-Contact' + $index()}" class="seller-Contact">
</span>
</p>
</li>
<li><span class="buyerprocess-sprite seller-email"></span>
<p class="leftfloat">
<span data-bind="attr: { id: 'seller-Email' + $index()}" class="seller-Email"></span>
</p>
</li>
<li><span class="buyerprocess-sprite seller-address"></span>
<p class="leftfloat">
<span data-bind="attr: { id: 'seller-Address' + $index()}" class="seller-Address">
</span>
</p>
<p>
<span class="font10 text-light-grey margin-left10">Your contact details have been shared
with the seller</span></p>
</li>
</ul>
I have some questions regarding this specific html structure:
- We are assigning unique IDs to each li element, of which there are 20. Concerns have been raised about the potential impact of having too many globally stored IDs on ID lookup performance.
- If we opt for accessing elements by classes instead of using individual IDs for each li, it seems to function correctly but there might be a trade-off in terms of speed.
For instance, if clicking on a span with ['seller-Person' + $index()] requires accessing 'seller-Name' + $index(), we have two options:
- $('#seller-Name' + $(this).attr('id'))
- OR $(this).parents(.buyerprocess-sprite).find('.seller-Name')
In my opinion, the first option is more straightforward and likely faster.
How can we determine which approach is more effective?