使用多个选择器？

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”视为您当前在代码中使用的硬编码元素引用。

Answer 2

一个简单的循环就可以解决这个问题：

$('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

Answer 3

您可以使用

选择按钮类型的所有输入

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

并浏览页面上的每个按钮。

Answer 4

创建一个单独的函数并使用选择器为任意数量的输入和 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 5

使用 JQuery 的 $(this) 和 JQuery 的 .each。

这是一个有效的小提琴：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>

查询：

$(".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();
});