JQuery-将html按钮替换为<李>同时保持值不变

JQuery - Replace html button with <li> while keeping values intact

本文关键字：gt 替换 按钮 JQuery- lt html      更新时间：2023-09-26

我有一个带有按钮的页面：

<input type="button" alue="TEST" 
style="height:40px;width:120px;"
 onClick="javascript:window.location='page.html';" />

我想将其转换为（webui）：

<li><a href="page.html">TEST</a></li>

这是我目前为止的代码：（似乎不起作用）

  $('<input type="button" value=').replaceWith('<li>');
    $('onClick="javascript:window.location=').replaceWith('<a href="');
     $('';" />').replaceWith('" target="_self"></a></li>"');

或者以更通用的方式：

$("input[type='button']").replaceWith(function() {
   var $button = $(this);
   var $result = $("<a></a>");
   var target = $button.attr("onClick");
   target = target.substr(target.indexOf(''''));
   target = target.substr(0, target.length - 2);
   $result.attr("href", target);
   $result.text($button.val());
   $result = $("<li></li>").append($result);
   return $result;
});

现场示例：http://jsfiddle.net/ERLgR/1/

您正在尝试对jQuery对象进行字符串替换，但这不是它的工作方式。你可以这样做：

$(':button[value="TEST"]').replaceWith($('<li><a href="page.html">TEST</a></li>​​​​'));​

此外，正如Tomalak在评论中补充的那样，最好的做法是直接在HTML中更改它，而不是使用javascript。

这似乎是一个普遍的坏主意，但这里有一个答案？

var elm = $('input[type="button"]'),
    alue = elm.attr('alue'),
    page = elm.attr('onClick').split("'")[1],
    elm2 = '<li><a href="'+page+'">'+alue+'</a></li>';
elm.replaceWith(elm2)​;​​​​​​​​​​​​​

FIDDLE

相关文章：