CODEWITHSUNDEEP
javascriptjquery
Madian Malfi
Madian Malfi

Reputation: 610

how to do simple jquery for multiple actions?

I need to make simple jquery that can function for many objects by Id .

For example If i have this HTML :

<div id="all-ids">
   <div id="parent-id-1">
      <div id="1">
         <div></div>
         <div></div>
         <div></div>
      </div>
   </div>
   <div id="parent-id-2">
      <div id="2">
         <div></div>
         <div></div>
         <div></div>
      </div>
   </div>
   <div id="parent-id-3">
      <div id="3">
         <div></div>
         <div></div>
         <div></div>
      </div>
   </div>
   ...
</div>

now if i need to do a click function for this i would do like this :

$(document).on("click","#parent-id-1",function() {
   $('#1').show();
});

$(document).on("click","#parent-id-2",function() {
   $('#2').show();
});

$(document).on("click","#parent-id-3",function() {
   $('#3').show();
});

is there in way to make the above Jquery something more simpler since i have to many divs ? ... i mean something like this : 

$(document).on("click","#parent-id-|ID-NUMBER|",function() {
   $('#|ID-NUMBER|').show();
});

so this code would work for even 1000 id.

NOTE:The |ID-NUMBER| are both the in #parent-id and just the #id.

Upvotes: 0

Views: 61

Answers (4)

andrusieczko
andrusieczko

Reputation: 2824

I think that should work:

[1, 2, 3].forEach(function(index) {
  $(document).on("click","#parent-id-" + index,function() {
     $('#' + index).show();
  });
});

or alternatively, if you don't want to name both divs, you can either use > to point the direct child of a parent div, or write another selector. To achieve that you can do:

<div id="all-ids">
   <div class="parent">
      <div>
         <div></div>
         <div></div>
         <div></div>
      </div>
   </div>
   <div class="parent">
      <div>
         <div></div>
         <div></div>
         <div></div>
      </div>
   </div>
   <div class="parent">
      <div>
         <div></div>
         <div></div>
         <div></div>
      </div>
   </div>
   ...
</div>

and in javascript:

$(document).on("click",".parent",function() {
   $(this).find('>div').show();
});

Upvotes: 0

Ozan
Ozan

Reputation: 3739

You can use attribute selector to select elements that have an id value that starts with 'parent-id-'.

$(document).on("click", "[id^=parent-id-]", function(e) {
  alert($(this).attr("id").replace("parent-id-", ""));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="all-ids">
  <div id="parent-id-1">
    <div id="1">
      <div>Lorem</div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div id="parent-id-2">
    <div id="2">
      <div>Ipsum</div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div id="parent-id-3">
    <div id="3">
      <div>Dolor</div>
      <div></div>
      <div></div>
    </div>
  </div>
  ...
</div>

Upvotes: 0

StackSlave
StackSlave

Reputation: 10627

You could use a different selector. I think you actually want to click on the Element and not the body. I'm thinking this is what you want:

$('[id^=parent-id]').each(function(i, e){
  var el = $(e);
  el.click(function(){
    el.children(':first').show();
  });
});

Note that you cannot start an HTML attribute or JavaScript variable with a number, including an id.

Upvotes: 0

rigobcastro
rigobcastro

Reputation: 1257

Don't use IDs, is very complex and not scalable. Use classes instead:

<div id="all-ids">
   <div class="parent">
      <div class="children">
         <div></div>
         <div></div>
         <div></div>
      </div>
   </div>
   <div class="parent">
      <div class="children">
         <div></div>
         <div></div>
         <div></div>
      </div>
   </div>
   <div class="parent">
      <div class="children">
         <div></div>
         <div></div>
         <div></div>
      </div>
   </div>
   ...
</div>

In jQuery:

$(document).on("click",".parent",function() {
   $(this).find('.children').show();
});

You don't need more and you can write millions of parents and its children.

Upvotes: 1

Related Questions