Question

我想使用javascript将所有<option>代码更改为<a>代码。我希望所有属性保持不变。我只是想切换它是什么类型的标签。

我试过对这个想法做了几处修改，但没有用。

$.each (array_of_options, function (i, v) {
    v.replace(/option/i, "a");
});

但这只会导致错误。

Answer 1

一个选项：

$('option').each(
    function(){
        var that = $(this);
        $('<a />')
            .text(that.text())
            .attr('href','#' + that.val() + '.html')
            .appendTo($('body'));
        that.remove();
    });

JS Fiddle demo

或者，您可以使用纯JavaScript：

var sel = document.getElementById('select'),
    opts = sel.getElementsByTagName('option'),
    b = document.getElementsByTagName('body')[0];

for (var i=0,len=opts.length;i<len;i++){
    var a = document.createElement('a');
    a.href = '#' + opts[i].value + '.html';
    a.innerHTML = opts[i].innerHTML;
    b.appendChild(a);
}

JS Fiddle demo

Answer 2

我为此创建了一个快速的jsFiddle：http://jsfiddle.net/KkGUt/

这会创建一个新标记，复制文本，复制属性，然后替换原始标记。

代码：

$( function () {
    $( 'option' ).each( function () {
        var $old  = $( this ),
            $new  = $( document.createElement( 'a' ) ),
            attrs = $old.get( 0 ).attributes;
        //-- copy text from option
        $new.text( $old.text() );
        //-- copy over attributes
        for ( var i = 0, len = attrs.length; i < len; i++ ) {
            $new.attr( attrs[ i ].name, attrs[ i ].nodeValue );
        }
        //-- replace $old with $new
        $old.replaceWith( $new );
    } );
    console.log( $( 'form' ) );
} );

如何更改DOM元素？

2 个答案: