user1919 user1919 - 2 months ago 18
Javascript Question

Merge jquery code with several classes and ids

I have lots of repeated Jquery code with small differences. I wonder if its possible to merge the following Jquery code into one:

$(".dropdown-menu-attributes li a").click(function(){
$("#modal-button-attributes:first-child").text($(this).text());
});

$(".dropdown-menu-operators li a").click(function(){
$("#modal-button-operators:first-child").text($(this).text());
});

$(".dropdown-menu-and-or li a").click(function(){
$("#modal-button-and-or:first-child").text($(this).text());
});


I tried this but doesn't work for the second and third classes.

$(".dropdown-menu-attributes .dropdown-menu-and-or .dropdown-menu-operators li a").click(function(){
$("#modal-button-attributes:first-child #modal-button-operators:first-child #modal-button-and-or:first-child").text($(this).text());
});

Answer Source

You want to use the , (Multiple Selector) selector:

$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators") 

to first find those three elements, and then on the result set you would do another search to find the li a. The final code would look that way:

$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
    .find('li a')
    .click(function(){

    });

To get the correct id you would need to store that id somewhere. One way would be to add it to the corresponding element that holds those classes using the data-* attribute. And search for that using closest

$(".dropdown-menu-attributes,.dropdown-menu-and-or,.dropdown-menu-operators")
  .find('li a')
  .on('click', function(e) {
    var id = $(this).closest('[data-modal-button-id]').data().modalButtonId;
    console.log('#modal-button-'+id+':first-child');
    $('#modal-button-'+id+':first-child').text($(this).text());
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-menu-attributes"  data-modal-button-id="attributes">
  <ul>
    <li><a>test1</a></li>
  </ul>
</div>
<div class="dropdown-menu-and-or" data-modal-button-id="and-or">
  <ul>
    <li><a>test2</a></li>
  </ul>
</div>
<div class="dropdown-menu-operators" data-modal-button-id="operators">
  <ul>
    <li><a>test3</a></li>
  </ul>
</div>

How you want to name the data-* attribute depends on you, there is most likely a better name for that.

In general I would choose another setup and use a common class instead

$('.dropdown-menu li a')
  .on('click', function(e) {
    var id = $(this).closest('.dropdown-menu').data().modalButtonId;
    console.log('#modal-button-'+id+':first-child');
    $('#modal-button-'+id+':first-child').text($(this).text());
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-menu dropdown-menu-attributes"  data-modal-button-id="attributes">
  <ul>
    <li><a>test1</a></li>
  </ul>
</div>
<div class="dropdown-menu dropdown-menu-and-or" data-modal-button-id="and-or">
  <ul>
    <li><a>test2</a></li>
  </ul>
</div>
<div class="dropdown-menu dropdown-menu-operators" data-modal-button-id="operators">
  <ul>
    <li><a>test3</a></li>
  </ul>
</div>