Question

I have a Jquery Mobile collapsible set, which can have any number of “drawers”. JQM assigns corner like this:

  collapsibleHeading.find("a").first()
      ...
      .add( ".ui-btn-inner", $el )
         .addClass( "ui-corner-top ui-corner-bottom" )

I want to add a horizontal-option to the collapsible, so it also works like a tab-box. I have the CSS all ready but the corner in a single statement are difficult…

I need to check for direction, which I’m doing like this:

 (o.directon) == true/false

This is what I have:

// predefine classes for HORIZONTAL(first,last,rest) and VERTICAL
baseCorners = o.direction == "horizontal" ? [ "ui-corner-tl", "ui-corner-tr", "" ] : ["ui-corner-top", "ui-corner-top", "ui-corner-top"],
toggleCorners = o.direction == "horizontal" ? [ "ui-corner-bl", "ui-corner-br", "" ] : ["ui-corner-bottom","ui-corner-bottom","ui-corner-bottom" ],

So now I can assign baseCorners and toggleCorners without worrying about direction.

My problem:
How can I add a check/filter for first/last/remaining collapsibles, so that I can run this in one statement like so:

  collapsibleHeading.find("a").first()
      ...
      .add( ".ui-btn-inner", $el )
         .addClass( "if-first" ? baseCorners[0] : "elseif-last" ? baseCorners[1] "else" baseCorners[2] + "same for toggleCorners" )

Question:
I’m lost… any idea if this is at all possible? Thanks for help.

EDIT:
This is what I have now:

.filter(":first")
    .add( ".ui-btn-inner", $el )
        .addClass( baseCorners[0] + toggleCorners[0] ).end()
.filter(":last")
    .add( ".ui-btn-inner", $el )
        .addClass( baseCorners[1] + toggleCorners[1] ).end()
.not(':first').not(':last')
        .add( ".ui-btn-inner", $el )
            .addClass( baseCorners[2] + toggleCorners[2] );

Not sure this is the most feasable solution though

SOLUTION:
Thanks for helping everyone. This is how I did it in then end. Once I had the proposed solution set up, I found out, that JQM runs the script for every element, so I could not use a loop, because on every run, there is only 1 element to loop through.

This way it works:

 // if not horizontal, I always assign the same class
 baseCorners = o.direction == "horizontal" ? [ "A", "B", "C" ] : ["D", "D", "D"],
 toggleCorners = o.direction == "horizontal" ? [ "E", "F", "G" ] : ["H","H","H" ],
 // get position of current element and calculate trigger
 collIndex = $('div:jqmData(role="collapsible-set") div:jqmData(role="collapsible") h3').index(collapsibleHeading),
 collTrigg = collIndex == 0 ? 0 : collIndex == $('div:jqmData(role="collapsible-set") div:jqmData(role="collapsible")').length-1 ? 1 : 2;

With this setup, the first element always gets index 0, the last always index 1 and everything in between index 2, so I’m staying flexible regarding the number of elements in between.

Then it’s just:

 $el.add( ".ui-btn-inner", $el )
      .addClass( baseCorners[collTrigg] + toggleCorners[collTrigg] );

Nice!

Answer 1

This should be the same. It’s not like it’s a lot less code, but it avoids repetition and should therefore be easier to maintain.

selection.each(function(i,e) {

    var el = $(e),
        index = i===0 ? 0 :
            i===selection.length-1 ? 1 : 
            2;

    el.add( ".ui-btn-inner", $el )
        .addClass( baseCorners[index] + toggleCorners[index] );

});