Class prefix as selector for each function

Question

I am able to do this using an ID prefix as the selector, but I need to be able to do it with classes instead. It's an each function for opening up different modal windows on the same page. I need to avoid using ID names because I have some modal windows that will have multiple links on the same page, and when using IDs, only the first link will work.

So here's the function as it works with IDs:

$('div[id^=ssfamodal-help-]').each(function() {
    var sfx = this.id,
        mdl = $(this),
        lnk = $('.link-' + sfx),
        cls = $('.ssfamodal-close'),
        con = $('.ssfamodal-content');

    lnk.click(function(){
        mdl.show();
    });
    cls.click(function(){
        mdl.hide();
    });
    mdl.click(function() {
        mdl.hide();
    });
    con.click(function() {
        return false;
    });
});

and I'm trying to change it to classes instead, like:

   $('div[class^=ssfamodal-help-]').each(function() {
        var sfx = this.attr('class'),
        etc.

But I cannot get it to work without using IDs. Is it possible?

EDIT Fixed error with semi-colon at end of Vars, and updated Fiddle with the fix. Still not working though.

Here's a Fiddle

** UPDATE **

To be clearer, I need to be able to refer to the same modal more than once on the same page. E.g.:

MODAL 1

MODAL 2

MODAL 3

MODAL 4

LINK TO MODAL 1

LINK TO MODAL 2

LINK TO MODAL 3

LINK TO MODAL 4

OTHER STUFF

LINK TO MODAL 1

LINK TO MODAL 4

LINK TO MODAL 3

OTHER STUFF

LINK TO MODAL 2

ETC.

Answer 1

When using classes get rid of the ID habit :

className1, className2, className3 ... etc

simply use

className

HTML:

<div class="ssfamodal-help-base ssfamodal-backdrop">
    <div id="help-content" class="ssfamodal-content">
        <span class="ssfamodal-close">[x]</span>
        Howdy
    </div>
</div>

<div class="ssfamodal-help-base ssfamodal-backdrop">
    <div id="help-content" class="ssfamodal-content">
        <span class="ssfamodal-close">[x]</span>
        Howdy Ho
    </div>
</div>

<span class="link-ssfamodal-help-base">One</span>
<span class="link-ssfamodal-help-base">Two</span>

LIVE DEMO

var $btn = $('.link-ssfamodal-help-base'),
    $mod = $('.ssfamodal-help-base'),
    $X   = $('.ssfamodal-close');

$btn.click(function(i) {
  var i = $('[class^="link-"]').index(this); // all .link-** but get the index of this!
  // Why that?! cause if you only do:
  // var i = $('.link-ssfamodal-help-base').index();
  // you'll get // 2
  // cause that element, inside a parent is the 3rd element
  // but retargeting it's index using $('className').index(this);
  // you'll get the correct index for that class name!

  $('.ssfamodal-help-base').eq(i).show()     // Show the referenced element by .eq()
  .siblings('.ssfamodal-help-base').hide();  // hide all other elements (with same class)

});
$X.click(function(){
   $(this).closest('.ssfamodal-help-base').hide();
});

_{From the DOCS:
http://api.jquery.com/eq/
http://api.jquery.com/index/
http://api.jquery.com/closest/}

Here I created a quite basic example on how you can create a jQuery plugin of your own to handle modals: http://jsbin.com/ulUPIje/1/edit
feel free to use and abuse.

Answer 2

The problem is that class attributes can consist of many classes, rather than IDs which only have one value. One solution, which isn't exactly clean, but seems to work is the following.

$('div').filter(function () {
    var classes = $(this).attr('class').split(/\s+/);
    for (var i = 0; i < classes.length; i++) 
        if (classes[i].indexOf('ssfamodal-help-') == 0)
            return true;
    return false;
}).each(function() {
    // code
});

jsFiddle

---

Or, equivalently

$('div').filter(function () {
    return $(this).attr('class').split(/\s+/).some(function (e) {
        return e.indexOf('ssfamodal-help-') == 0;
    });
}).each(function() {
    // code
});

jsFiddle

Answer 3

If there is one-to-one relationship between the modal helps and the modal links which it appears there is...can simplfy needing to match class values by using indexing.

For this reason you don't need unique class names, rather they just overcomplicate things. Following assumes classes stay unique however

var $helps=$('div[id^=ssfamodal-help-]');
var $help_links=$('div[id^=link-ssfamodal-help-]');

$help_links.click(function(){
    var linkIndex= $help_links.index(this);
    $helps.hide().eq( linkIndex ).show();
});
 /* not sure if this is what's wanted, but appeared original code had it*/
 $helps.click(function(){
      $(this).hide()
 })

/* close buttons using traverse*/
$('.ssfamodal-close').click(function(){
    $(this).closest('div[id^=ssfamodal-help-]' ).hide();
});

Also believe that this code is a little more readable than original apporach

DEMO

Answer 4

Can you try this,

 $('div[class^=ssfamodal-help-]').each(function() {


     var sfx = $(this).attr('class');

         console.log(sfx); 
         /*console log:
           ssfamodal-help-base ssfamodal-backdrop
           ssfamodal-help-base2 ssfamodal-backdrop
         */

 });

Demo: http://jsfiddle.net/xAssR/51/

Answer 5

why don't you write like

$('div.classname').each(function() {

// you can write your desired code here
        var sfx = this.attr('class');
        var aa= this.attr('id');
});

or

$('.classname').each(function() {
// you can write your desired code here
        var sfx = this.attr('class');
        var aa= this.attr('id');
});

where classname is the name of the class used for the div in html

Thanks.