Question

我正在尝试在HTML代码段上设置一些属性。目的是重新填充具有先前输入值的表单。我使用.attr（）设置属性但是在我执行.html（）之后，我没有看到我更改的属性。

我在这里做了一个基本的例子http://jsfiddle.net/ejanderson4/CSYnU/

我的功能如下：

function setValue(html,value,name){
    var element=$(html);
    $(element).find("[name='"+name+"']").attr('value',value)
    return element.html();
}

Answer 1

正在设置它，但由于我不知道的原因，您无法直接查询输入元素的value属性。您需要在该元素上调用.val()才能获得它。

更新了您的示例here

Answer 2

使用$.parseXML解析html字符串，然后设置attr值

var html="<div><label id='el_c5c0f78656138c39c5eb91a9bf1d3bf6'> table input 1 </label><input type='text' value='' name='table_input_1' class='select-mini' id='table_input_1' /></div>";

var value= 'xxxxxxxxxxxxx';

var name='table_input_1';

    function setValue(html,value,name){

        var xml = html,
        xmlDoc = $.parseXML( xml ),
        $xml = $( xmlDoc ),
        $title = $xml.find( "[name='"+name+"']" );
    $title.attr("value",value);
        //var element=$(html);
        //element.find("[name='"+name+"']").attr('value',value)

        return $title.attr("value");
    }

    alert(setValue(html,value,name));

这是工作小提琴http://jsfiddle.net/CSYnU/4/

此解决方案也要求您使用jquery 1.5.2及更高版本

<强>更新

在你必须做的场景中过度使用

function setValue(html,value,name){
    var element=$(html);
    $(element).find("[name='"+name+"']").attr('value',value);

    return $(element).find("[name='"+name+"']").attr('value');
}

这里是小提琴http://jsfiddle.net/CSYnU/5/

您要将html包裹在$(html)中，然后无需再将html中的缓存$包裹起来var element = $(html); element.find ...

{{1}}

见http://jsfiddle.net/CSYnU/6/

Answer 3

设置输入元素的当前值不会更改初始值，这是value属性的原因。

没有属性可以更改初始值，因此您无法以这种方式更改HTML代码。

编辑：

如果你想使用页面中的元素，那么只需让函数返回一个包含元素的jQuery对象，而不是返回HTML代码：

function setValue(html, value, name){
  var elements = $(html);
  elements.find("[name='"+name+"']").val(value)
  return elements;
}

将元素添加到页面的工作方式与使用字符串相同。例如：

var html = '<div><input type="text" name="city" /></div>';
$('#SomeForm').append(setValue(html, 'York', 'city'));

Answer 4

依赖于您的代码，第一个问题是关于元素变量。它不表示“table_input_1”元素。要获取此元素，您应该替换为：

var element=$(html).find("[name='"+name+"']");

第二个问题出在你的退货声明中。由于您更改了input元素的值，因此必须通过方法val（）或attr（'value'）而不是html（）来获取此值。 html（）方法用于获取元素标记内的内容，但在这种情况下，value是属性，而不是内容。

return element.attr('value'); // element.val();

以下是完整的代码：

function setValue(html,value,name){
    var element=$(html).find("[name='"+name+"']");
    element.attr('value',value); // element.val(value);
    return element.attr('value'); // element.val();
}

Answer 5

我认为这里简短的回答是在DOM对象上设置属性并不一定会改变浏览器返回innerHTML的内容。如果要检索特定属性，则应直接检索该属性。

您的代码中也有错误（jQuery可能容忍）。您已经将元素转换为jQuery对象，因此您不需要使用$（element）.find再次执行此操作，您只需使用element.find。

function setValue(html,value,name){
    var element=$(html);
    element.find("[name='"+name+"']").attr('value',value)
    return element.html();
}

Answer 6

一个原因是jQuery attr 方法在HTML属性和DOM属性之间混淆。 setAttribute 和 getAttribute 的嵌入在IE中是（可能仍然是）错误的，因此通常会忘记HTML属性并使用DOM属性。

在大多数浏览器中，修改HTML属性（例如使用 setAttribute ）将修改相关的DOM属性。但在许多浏览器中，更改DOM属性不会修改HTML属性。

此外，一些浏览器将根据当前的DOM属性修改元素的innerHTML，其他浏览器将使用HTML属性（在大多数浏览器中可能具有不同的值）。 HTML 5是第一次标准化innerHTML行为的尝试，请注意它还不是W3C标准，并且没有一贯地实现。

最好的方法是保持一致，并始终将DOM属性设置为您想要的值。期望元素的innerHTML可能在浏览器中不一致。

为什么jQuery设置属性没有反映在.html（）中？

6 个答案:

编辑：