CODEWITHSUNDEEP
jqueryhtml
Sudheer Pal
Sudheer Pal

Reputation: 65

How to select all the id in jquery?

Description: I have lots of div with class name like this:

<div class="flipbox1">,<div class="flipbox2">,
             <div class="flipbox3">,<div class="flipbox4">

etc.

i am selecting the div with this:

$(document).ready(function(){
  var id=$('#img-txt a').attr('id').replace('flip','');
  $("#flip"+id).on("click",function(e){
        $(".flipbox"+id).flippy({
            color_target: "red",
            direction: "left",
            duration: "750",
            verso: "<span>Woohoo ! \\o/</span>",
         });
         e.preventDefault();
    });
});

required js is: http://blog.guilhemmarty.com/flippy/jquery.flippy.min.js

Problem is var id is getting only first div's classs value. So only first div is flipping.

I think this can be done using loop. How to use that.

Upvotes: 2

Views: 144

Answers (3)

Guffa
Guffa

Reputation: 700342

Loop through all the links and get the id for each link in the loop:

$('#img-txt a').each(function() {
  var id = $(this).attr('id').replace('flip','');
  $(this).on("click", function(e){
    $(".flipbox"+id).flippy({
      color_target: "red",
      direction: "left",
      duration: "750",
      verso: "<span>Woohoo ! \\o/</span>",
    });
    e.preventDefault();
  });
});

Demo: http://jsfiddle.net/bEeDu/

Alternatively, bind the same event on all links, and get the id for the clicked link in the event handler:

$('#img-txt a').click(function(e){
  var id = $(this).attr('id').replace('flip','');
  $(".flipbox"+id).flippy({
    color_target: "red",
    direction: "left",
    duration: "750",
    verso: "<span>Woohoo ! \\o/</span>",
  });
  e.preventDefault();
});

Demo: http://jsfiddle.net/bEeDu/1/

Upvotes: 2

fujy
fujy

Reputation: 5264

Try something like this:

var myFunction = function(e) {
     $(".flipbox"+id).flippy({
        color_target: "red",
        direction: "left",
        duration: "750",
        verso: "<span>Woohoo ! \\o/</span>",
     });
     e.preventDefault();
}

for (var i=0; i<numberOfDivs; i++){    // number of divs should be known
   $(".flip"+i).on("click",myFunction);  // where flip is the class name
}

Upvotes: 0

Rameez
Rameez

Reputation: 1712

var id=$('#img-txt a').attr('id').replace('flip','');

This won't give you all IDs, you need to iterate through each element to extract IDs, something like this:

$( "#img-txt a" ).each(function( index ) {

var id=$(this).attr('id').replace('flip','');
$("#flip"+id).on("click",function(e){
        $(".flipbox"+id).flippy({
            color_target: "red",
            direction: "left",
            duration: "750",
            verso: "<span>Woohoo ! \\o/</span>",
         });
         e.preventDefault();
    });
});

Upvotes: 3

Related Questions