javascript - 使用多个选择器？

Question

所以我写这个是为了获取一个按钮并将其重新创建为内部包含跨度的链接。但是，我似乎无法让它适用于多个按钮。我最终需要复制并粘贴 JS 并输入不同的类来复制整个脚本。必须有一种更简单的方法来做到这一点......有什么想法吗？

两个按钮的示例，以及迄今为止唯一有效的解决方案...... 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

考虑使用第二个类名来标识您想要处理的元素，然后像这样循环遍历它们:

<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

     })

然后您可以将“currentInput”视为您当前在代码中使用的硬编码元素引用。