使用 jquery 仅选择同一 div 中的元素

Question

how can i selec only the element in the same div with jquery

 $('.to-show').hide(); $('#offset').on('change', function() { if ($(this).val() == "Custom") { $(this).closest('.wrapper').children('.to-show').toggle(); } else { $('.to-show').hide(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div class="to-click"> <td class="value"> <select id="offset" class="" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes"> <option value="">Choose an option</option> <option value="15" selected="selected" class="attached enabled">15</option> <option value="Custom" class="attached enabled">Custom</option> </select> </td> </div> <div class="to-show"> <div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div> </div> </div> <div class="wrapper"> <div class="to-click"> <td class="value"> <select id="offset" class="" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes"> <option value="">Choose an option</option> <option value="15" selected="selected" class="attached enabled">15</option> <option value="Custom" class="attached enabled">Custom</option> </select> </td> </div> <div class="to-show"> <div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div> </div> </div>

So this only work with first select option

How i can make it work with the second select option what i am missing here?

i tried also $(this).closest('.wrapper').find('.to-show').toggle();

but that did not work

thank you

Answer 1

Having two elements with the same id is invalid html. Switch it to use class or another attribute. But you have a second problem with $('.to-show').hide(); , it is always hiding both .to-show .

 $('.to-show').hide(); $('.offset').on('change', function() { if ($(this).val() == "Custom") { $(this).closest('.wrapper').children('.to-show').toggle(); } else { $(this).closest('.wrapper').children('.to-show').hide(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div class="to-click"> <td class="value"> <select id="offset" class="offset" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes"> <option value="">Choose an option</option> <option value="15" selected="selected" class="attached enabled">15</option> <option value="Custom" class="attached enabled">Custom</option> </select> </td> </div> <div class="to-show"> <div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div> </div> </div> <div class="wrapper"> <div class="to-click"> <td class="value"> <select id="offset" class="offset" name="attribute_offset" data-attribute_name="attribute_offset" data-show_option_none="yes"> <option value="">Choose an option</option> <option value="15" selected="selected" class="attached enabled">15</option> <option value="Custom" class="attached enabled">Custom</option> </select> </td> </div> <div class="to-show"> <div class="tc-cell tc-col-auto"><button type="button" class="button tm-section-link" data-title="Custom Offset" data-sectionid="61cc25f8bfe870.59019822">Custom Offset</button></div> </div> </div>