如何在不同的 HTML 标记场景中使用 jQuery 设置值

How to set value using jQuery in different HTML tag scenarios?

本文关键字：jQuery 设置 HTML      更新时间：2023-09-26

有没有一种简单的方法来更改不同HTML结构中的值？

在我当前的代码中，我有：

<input type="text" class="value" value="5.0"/>

我使用 .each() 和 val() 来更改类 value 的值：

$(this).val(convert($(this).val(), from, to));

当我尝试执行 convert 函数并将其返回值分配给其他 HTML 结构时会出现问题，如下所示：

<td><span class="value">5.0</span></td>
<td class="value">5.0</td>

尽管我的价值在标签span，但它似乎没有改变。 我认为jQuery.val()仅适用于设置输入字段或属性的值，并且我可以使用jQuery.text()或jQuery.html()来更改span标签中的值。

我如何编写代码，以便我可以找出我正在更改的元素，并使用适当的 setter 方法，或者使用适用于 HTML 标记和span HTML 标记甚至td的方法input？

添加小提琴以防万一...（全部应更新）

http://jsfiddle.net/dennisfedco/sa82pmwp/3/

输入元素将具有 .value 属性。这意味着您可以查找该属性并使用它，或者如果不存在，则使用文本值

$('.value').each(function(){
 //if value is not undefined then use val()
 if(this.value != void 0){
  $(this).val(convert($(this).val(),from,to));
 //otherwise use text
 }else{
  $(this).text(convert($(this).text(),from,to));
 }
});

您可以使用:input选择器测试元素是否为输入类型：

$('.value').each(function() {
    var $this = $(this);
    if ($this.is(':input'))
        $this.val(convert($this.val(), from, to));
    else 
        $this.text(convert($this.text(), from, to));
});

在引擎盖下，jQuery基本上用一个小的正则表达式测试元素的节点名称，看看它是否是一个输入元素，所以它应该非常快：

var rinputs = /^(?:input|select|textarea|button)$/i;
...
return rinputs.test(el.nodeName);

示例（修改代码以在此处工作）：

$('.value').each(function() {
  var $this = $(this);
  if ($this.is(':input'))
    $this.val($this.val() + " - changed!");
  else
    $this.text($this.text() + " - changed!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="value" type="text" value="Initial 1" />
<br />
<span class="value">Initial 2</span>

如果你想对解决方案过于聪明，你可以做这样的事情，在那里你获取你应该使用哪个函数的引用，然后稍后调用它：

$('.value').each(function() {
  var $this = $(this), 
      method = $this.is(':input') ? $this.val : $this.text;
  method.apply($this, [convert(method.apply($this), from, to)]);
});

也：

  • 这是对jsFiddle的更新。

一个选项可以让jQuery在输入值和不输入值之间进行选择。

$('.value:input').each(function(){
    $(this).val(convert($(this).val(), from, to));
});
$('.value').not(':input').each(function(){
    $(this).text(convert($(this).text(), from, to));
});

你更新的小提琴。

相关文章：