Question

我正在尝试查找选项标记的所有属性（值除外），因此我可以用列表项标记替换选项标记，然后将属性添加到列表项。我遇到的每个Google结果都说使用replace()来执行此操作，但是，我在控制台中收到以下错误：

Uncaught TypeError: undefined is not a function

这发生在以下行：

var elemAtts = $(this).replace('<option value="'+$(this).prop("value")+'" ', '');

这是整个脚本：

$('select').each(function(){

        var selectName = $(this).prop("name");
        var selectOpts = $(this).find("option");
        var selectPar = $(this).parent();

        var hiddenInput = '<input type="hidden" name="'+selectName+'" value="">';

        var menu = '<div class="jqSelect">' + 
            '<div class="selected-text" id="'+selectName+'-selected"><div id="'+selectName+'-text">'+$(this).find(":selected").text()+'</div>' + 
            '<div class="caret" onclick="$(\'ul#'+selectName+'-menu\').toggle();"></div>' +
            '<ul id="'+selectName+'-menu">';

        selectOpts.each(function(){

            if($(this).is(":selected")){

                $('#'+selectName+'-selected').text($(this).text());
                menu += '<li class="selected"';

            } else {

                menu += '<li';

            }

            var elemAtts = $(this).replace('<option value="'+$(this).prop("value")+'" ', '');
            elemAtts = elemAtts.replace('>', '');

            menu += ' data-option-value="'+$(this).prop("value")+'" '+elemAtts+'>'+$(this).text()+'</li>';

        });

        menu += '</ul></div>';

        selectPar.html(menu + hiddenInput);

        $('ul#'+selectName+'-menu').hide();

        generatedMenu = $('#'+selectName+'-menu');
        generatedMenu.find('li').each(function(){

            $(this).on('click', function(){

                $('#'+selectName+'-text').text($(this).text());
                $('#'+selectName+'-menu').hide();
                $('input[name="'+selectName+'"]').attr("value", $(this).data('option-value'));
                $(this).siblings().removeProp('class');
                $(this).prop('class', 'selected');
            });

        });

    });

基本上我要做的就是转过来......

<option value="123" rel="toggleElem" class="foo" id="bar">Hello!</option>

进入此（字符串形式）......

rel="toggleElem" class="foo" id="bar"

Answer 1

好的，我做了一些Google-ing并找到了答案here。当它实际上是一个JavaScript函数时，我认为replace（）是一个jQuery函数。错误发生了，因为我直接使用$（this）。我所要做的就是以下几点：

var tag = $(this).prop('outerHTML');
var elemAtts = tag.replace('<option value="'+$(this).prop("value")+'" ', '');
elemAtts = elemAtts.replace('>'+$(this).text()+'</option>', '');

Answer 2

每个dom节点都有一个attributes属性，它是所有dom节点属性的映射。

您可以遍历这些内容以将它们传递给另一个元素，而不必担心任何字符串替换。

以下内容会将单个<option>转换为具有相同属性的<li>：

var $opt=$('option');

/* get the attributes of the DOM node */
var optAttributes = $opt[0].attributes;

/* new attribute object to pass to new <li> */
var listItemAttr={};

$.each( optAttributes, function( _, attr){
   /* each attribute object has a "name" and "value" property*/
   listItemAttr[attr.name]= attr.value 
});

var $li=$('<li>', listItemAttr).text( $opt.text() );

修改位以删除值属性（如果需要）

的 DEMO

<强> MDN Node.attributes docs

什么jQuery函数等同于PHP str_replace？

2 个答案: