loop or each? or other jQuery solution?

143
January 20, 2022, at 12:20 PM

How can I simplify the code below into just one element? Hoe can I avoid repetition for each function?

$('#pane-A .accordion.tabs').each(function() {
  if ($(this).length > 3)
    return;
  $('#pane-A .accordion.tabs:gt(2)').hide();
});
$('#pane-B .accordion.tabs').each(function() {
  if ($(this).length > 3)
    return;
  $('#pane-B .accordion.tabs:gt(2)').hide();
});
$('#pane-C .accordion.tabs').each(function() {
  if ($(this).length > 3)
    return;
  $('#pane-C .accordion.tabs:gt(2)').hide();
});
$('#pane-D .accordion.tabs').each(function() {
  if ($(this).length > 3)
    return;
  $('#pane-D .accordion.tabs:gt(2)').hide();
});
$('#pane-E .accordion.tabs').each(function() {
  if ($(this).length > 3)
    return;
  $('#pane-E .accordion.tabs:gt(2)').hide();
});
Answer 1

Put a common class on all the #pane-X elements. Then you can loop through them in a single each() statement using find() to get the related elements to hide.

Also note that the if statement is largely redundant, as jQuery functions are tolerant of missing elements, also that the :gt() selector is deprecated. Use slice() instead.

With that said, the code can be reduced to just the following for all instances:

$('.pane').each(function() {
  $(this).find('.accordion.tabs').slice(3).hide();
});
.pane { margin: 10px 0; } /* just for demo purposes */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="pane" id="pane-A">
  Pane A
  <div class="accordion tabs">Tab 1</div>
  <div class="accordion tabs">Tab 2</div>
  <div class="accordion tabs">Tab 3</div>
  <div class="accordion tabs">Tab 4</div>
  <div class="accordion tabs">Tab 5</div>
  <div class="accordion tabs">Tab 6</div>
</div>
<div class="pane" id="pane-B">
  Pane B
  <div class="accordion tabs">Tab 1</div>
  <div class="accordion tabs">Tab 2</div>
</div>
<div class="pane" id="pane-C">
  Pane C
  <div class="accordion tabs">Tab 1</div>
  <div class="accordion tabs">Tab 2</div>
  <div class="accordion tabs">Tab 3</div>
  <div class="accordion tabs">Tab 4</div>
  <div class="accordion tabs">Tab 5</div>
  <div class="accordion tabs">Tab 6</div>
</div>

Answer 2

Something like this could work.

    $('#pane-A, #pane-B, #pane-C, #pane-D, #pane-E').each(function() {
        let tabs = $('.accordion.tabs', this);
        if (tabs.length > 3) return;
        $('.accordion.tabs:gt(2)', this).hide();
    }
Rent Charter Buses Company
READ ALSO
Use custom fonts within expo/Node.js-monorepo with UI Kitten

Use custom fonts within expo/Node.js-monorepo with UI Kitten

I am using this monorepo as a base templateI installed UI Kitten based on the instructions in the UI Kitten documentation

117
How to correctly mock SharedPreferenceLiveData in Unit Test?

How to correctly mock SharedPreferenceLiveData in Unit Test?

I have created LiveData wrapper on Shared Preferences and created a shared preferenceLiveDataWhich then I am using in view model(shown below)

150
How can I use a url parameter(that is a user id &lt;str:pk&gt;) to prepopulate a field in DJANGO form

How can I use a url parameter(that is a user id <str:pk>) to prepopulate a field in DJANGO form

I'm doing a management application with 2 pages: users(clientes) and a user datail page that contains a user payment history(cheques)

153
Display data into dropdown list from database using PHP MVC

Display data into dropdown list from database using PHP MVC

i have tired to display animal id in views dropdown list when i want add a new animal in my database i cant call id of animal check image beloW i wanna to use loop for in view I have a model

125