Using multiple selectors?

Question

So I wrote this to take a button and recreate it as an Link with spans inside. However, I cant seem to get this to work for multiple buttons. I end up needing to copy and past the JS and enter in the different classes duplicating the entire script. There has to be an easier way to do this... Any thoughts?

Example of two buttons, and the only working solution thus far... http://jsfiddle.net/En72J/5/

HTML

    <div class="DIV_ONE">
      <input type="button" class="INPUT_ONE" value="Today's Work Items 10" onclick="hAction_win1(document.win1,'CU_APPL_SUM_WRK_PERFORM_WEEKS', 0, 0, 'This Week\'s Items 10', false, true);" tabindex="16" name="CU_APPL_SUM_WRK_DATE_SEL_DAYS">
    </div>

JQuery

// Page First loads Input Button Wrapped in Div.

// Grab Input Buttons Numbers ( Last 2 Characters )
var number = $('.INPUT_ONE').val().substr(-2);

// Grab Input Buttons Text, Minus the Numbers.
var term = $('.INPUT_ONE').val().slice(0, -2);

// Grab Input Buttons OnClick Value
var script = $('.INPUT_ONE').attr("onclick");

// Append 'term' Float Left
$('.DIV_ONE').append('<span class="text">' + term + '</span>');

// Append 'number' Float Right
$('.DIV_ONE').append('<span class="number">' + number + '</span>');

// Wrap Both 'term' and 'number' in an <A> LINK and set OnClick with 'script' var.
var second = $('.DIV_ONE').wrapInner('<a href="#" onclick="' + script + '" class="button btn_style"></a>');

// Finally, Delete old Button. New <A> Link as Victor! 
$('.INPUT_ONE').remove();  

CSS

  .btn_style {
   border-bottom: 1px dotted #CCCCCC;
   color: #666666;
   display: block;
   font-family: verdana;
   font-size: 12px;
   overflow: auto;
   text-decoration: none;
  }

  .number {
   background: none repeat scroll 0 0 #72716E;
   color: #FFFFFF;
   display: block;
   float: right;
   font-weight: bold;
   padding: 4px;
   position: relative;
   width: 20px;
  }

  .text {
   float: left;
   padding: 4px;
  }

Answer 1

Consider using a second class name to identify the elements you wish to process, then loop through them like so:

<div class="DIV_ONE buttonMe">
      <input type="button" class="INPUT_ONE" value="Today's Work Items 10" onclick="hAction_win1(document.win1,'CU_APPL_SUM_WRK_PERFORM_WEEKS', 0, 0, 'This Week\'s Items 10', false, true);" tabindex="16" name="CU_APPL_SUM_WRK_DATE_SEL_DAYS">
    </div>

JS:

     $('.buttonMe').each(function() {
           current= $(this);
           // at this point "current" points to the outer DIV
           currentInput = $(this).find('input')
           // then you can manipulate the current input

     })

Then you can treat "currentInput" as if it were the hard-coded element reference you're currently using in your code.

Answer 2

You could select all inputs of type button by using

$('input:button').each( function(index) {
    //do work here
});

and go through each button on your page.

Answer 3

create a seperate function and call the function with a selector for any number of inputs and div

function createlink(input, div) {
// Page First loads Input Button Wrapped in Div.

// Grab Input Buttons Numbers ( Last 2 Characters )
var number = $(input).val().substr(-2);

// Grab Input Buttons Text, Minus the Numbers.
var term = $(input).val().slice(0, -2);

// Grab Input Buttons OnClick Value
var script = $(input).attr("onclick");

// Append 'term' Float Left
$(div).append('<span class="text">' + term + '</span>');

// Append 'number' Float Right
$(div).append('<span class="number">' + number + '</span>');

// Wrap Both 'term' and 'number' in an <A> LINK and set OnClick with 'script' var.
var second = $(div).wrapInner('<a href="#" onclick="' + script + '" class="button btn_style"></a>');

// Finally, Delete old Button. New <A> Link as Victor! 
$(input).remove();
}

createlink('.INPUT_ONE', '.DIV_ONE');
createlink('.INPUT_TWO', '.DIV_TWO');

fiddle here

Answer 4

Use JQuery's $(this) and JQuery's .each .

Here's a working fiddle: http://jsfiddle.net/4jqBj/

HTML:

<div class="item">
    <input type="button" class="item_btn" value="Today's Work Items 10" tabindex="16" />
</div>
<div class="item">
    <input type="button" class="item_btn" value="This Week's Items 22" tabindex="16" />
</div>

JQUERY:

$(".item_btn").each(function () {
    var number = $(this).val().substr(-2);
    var term = $(this).val().slice(0, -2);

    $(this).parent().append('<span class="text">' + term + '</span>').append('<span class="number">' + number + '</span>');
    $(this).parent().wrapInner('<a href="#" class="button btn_style"></a>');
    $(this).remove();
});

Answer 5

A simple loop would solve that :

$('input[class^="INPUT_"]').each(function() {
    var n = $('<span />', {'class':'number', text    : this.value.slice(-2)}),
        t = $('<span />', {'class':'text',   text    : this.value.slice(0,-2)}),
        a = $('<a />', {'class':'btn_style', onclick : $(this).attr('onclick')});

    $(this).closest('div').append(a.append(n,t)).end().remove();
});

FIDDLE