如何在常用的 JS 函数中访问 JQuery 属性

Posted 2023-05-09

【中文标题】如何在常用的 JS 函数中访问 JQuery 属性

【英文标题】：How do I access JQuery property inside a usual JS function

【发布时间】：2018-07-12 15:58:36

【问题描述】：

我有一个函数，它接受一个数组作为参数，然后处理它并更改这个数组的值。问题是数组是由 JQuery 节点（通常跨度）组成的，我通过调用 .text() JQuery 方法来访问这个跨度值。下面是它的外观：

var array= 
[
    $('*[id$=id1]'),
    $('*[id$=id2]'),
    $('*[id$=id3]'),
    $('*[id$=id4]'),
    $('*[id$=id5]')
] // Ignore the weird way of the selectors. It's just a feature of back-end technology I use

function removeZeros(arr) 

  var map = arr.map(function(a) 
   //logic to perform...
  
  arr.forEach(function(value, index, arr) 
  
  arr[index] = Number.parseFloat(value).toFixed(maxNum);
  );
  //Rewriting the values..
  


removeZeros(array)

在上面的示例中，我得到了一个异常，因为存储在数组中的值只是普通的 html 代码。正如我之前提到的，我使用.text() 访问的真正价值。所以我需要让函数中的a调用这个方法。 我试过 (function($(a).text(), (function($(a.text()) 和 (function($a .text()) 到目前为止，但似乎没有任何效果，它引发了一个令人讨厌的未例外文字异常。无论如何我如何访问text()？

整个函数：

function removeZeros(arr) 

  var map = arr.map(function(a)
  
  if (a % 1 === 0) 
  
  var res = "1";
   
  else 
  
      var lastNumman = a.toString().split('').pop();
      if (lastNumman == 0)
      
        var m = parseFloat(a);
        var res = (m + "").split(".")[1].length;
       
      else 
      
        var m = a.split(".")[1].length;
        var res = m;
      
  
  return res;

  );

  var maxNum = map.reduce(function(a, b) 
    return Math.max(a, b);
  );

  arr.forEach(function(value, index, arr) 
  arr[index] = Number.parseFloat(value.text()).toFixed(maxNum);
  );

【问题讨论】：

这与您的问题无关，但arr.map 回调中的arr.forEach 将值分配给arr[index] 看起来......充其量是有问题的。

哦，不！它不是。我编辑它

【参考方案1】：

在上面的示例中，我得到了一个异常，因为存储在数组中的值只是普通的 HTML 代码。

不，它们是 jQuery 实例。在 jQuery 实例上调用 Number.parseFloat 将返回 NaN*。

如果你想访问文本不需要做任何特殊的事情，入口是一个jQuery对象，直接调用.text()就可以了：

arr[index] = Number.parseFloat(value.text()).toFixed(maxNum);
// ---------------------------------^^^^^^^

---

*（因为parseFloat会将对象强制转换为字符串，得到"[object Object]"，而"[object Object]"无法解析为浮点数）

---

正如您在评论中所说，看到完整功能后，您还想在a 上使用.text。以下是该内容和其他一些说明：

function removeZeros(arr) 
    var map = arr.map(function(a) 
        var res, astNumman, m;

        // *** Get the text of the entry
        a = a.text();

        if (a % 1 === 0)  // *** ? `a` is a string. This will coerce it to number and then do % on it.
            res = "1";
         else 
            lastNumman = a[a.length-1];              // *** Much more efficient than `a.split('').pop();`
            if (lastNumman == 0)                    // *** Again using a string as a number
                m = parseFloat(a);
                res = (m + "").split(".")[1].length; // *** The *length* of the fractional portion?
             else 
                m = a.split(".")[1].length;
                res = m;
            
        
        return res;
    );

    var maxNum = map.reduce(function(a, b) 
        return Math.max(a, b);
    );

    // ***
    arr.forEach(function(value, index, arr) 
        arr[index] = Number.parseFloat(value.text()).toFixed(maxNum);
    );

运行示例：

var array= 
[
    $('*[id$=id1]'),
    $('*[id$=id2]'),
    $('*[id$=id3]'),
    $('*[id$=id4]'),
    $('*[id$=id5]')
];

function removeZeros(arr) 
    var map = arr.map(function(a) 
        var res, astNumman, m;

        // *** Get the text of the entry
        a = a.text();

        if (a % 1 === 0)  // *** ? `a` is a string. This will coerce it to number and then do % on it.
            res = "1";
         else 
            lastNumman = a[a.length-1];              // *** Much more efficient than `a.split('').pop();`
            if (lastNumman == 0)                    // *** Again using a string as a number
                m = parseFloat(a);
                res = (m + "").split(".")[1].length; // *** The *length* of the fractional portion?
             else 
                m = a.split(".")[1].length;
                res = m;
            
        
        return res;
    );

    var maxNum = map.reduce(function(a, b) 
        return Math.max(a, b);
    );

    // ***
    arr.forEach(function(value, index, arr) 
        arr[index] = Number.parseFloat(value.text()).toFixed(maxNum);
    );


removeZeros(array);
console.log(array);

<div id="id1">7</div>
<div id="id2">6.4324</div>
<div id="id3">8.24</div>
<div id="id4">8998.3</div>
<div id="id5">0</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

removeZeroes 的目标似乎是将 jQuery 对象数组转换为字符串数组，对象的文本转换为数字，然后转换为字符串，其中它们在小数点后都有相同的位数（最长的一个）。如果是这样，我们可以提高一点效率：

function removeZeros(arr) 
    // Find longest decimal portion, convert jQuery objects to numbers
    var longest = -Infinity;
    arr.forEach(function(entry, index) 
        var num = parseFloat(entry.text());
        var str = String(num);
        var decimal = str.indexOf(".");
        var thisLength;
        if (decimal === -1) 
            thisLength = 1;
         else 
            thisLength = str.length - decimal - 1;
        
        if (thisLength > longest) 
            longest = thisLength;
        
        arr[index] = num;
    );

    // Format numbers as strings
    arr.forEach(function(num, index) 
        arr[index] = num.toFixed(longest);
    );

运行示例：

var array= 
[
    $('*[id$=id1]'),
    $('*[id$=id2]'),
    $('*[id$=id3]'),
    $('*[id$=id4]'),
    $('*[id$=id5]')
];

function removeZeros(arr) 
    // Find longest decimal portion, convert jQuery objects to numbers
    var longest = -Infinity;
    arr.forEach(function(entry, index) 
        var num = parseFloat(entry.text());
        var str = String(num);
        var decimal = str.indexOf(".");
        var thisLength;
        if (decimal === -1) 
            thisLength = 1;
         else 
            thisLength = str.length - decimal - 1;
        
        if (thisLength > longest) 
            longest = thisLength;
        
        arr[index] = num;
    );

    // Format numbers as strings
    arr.forEach(function(num, index) 
        arr[index] = num.toFixed(longest);
    );


removeZeros(array);
console.log(array);

<div id="id1">7</div>
<div id="id2">6.4324</div>
<div id="id3">8.24</div>
<div id="id4">8998.3</div>
<div id="id5">0</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

我使用了您的 arr.forEach-assign-to-arr[index] 模式，而不是您似乎更喜欢的 map（它确实避免了创建两个不必要的数组）。

【讨论】：

是的，我也必须致电text() 进行价值评估。但我也关心 a，因为我使用这些 JQuery 实例来执行逻辑......如果我尝试这样做 (function(a.text() 我得到 Uncaught SyntaxError: Unexpected token 。

@RobertBaratheon：您不会像这样将.text() 放在参数声明中。您可以在函数体中的a 上使用它。 （你还没有使用a 显示代码，所以很难告诉你把它放在哪里......）

我刚刚发布了整个函数。请看一下

如果您只想要来自a 的文本，请将其作为map 回调的第一行：a = a.text();（以后没有理由在a 上调用.toString()） . （请注意，您在该函数中存在语法错误，第一个 if 上有额外的 )。此外，您只需在任何给定范围内声明一个变量一次；将 var 放在前面变量的每次使用都是不必要且难以阅读的。）

好吧，我终于做到了。 arr[index].text(Number.parseFloat(value.text()).toFixed(maxNum)); 帮助了我。我不需要更改对象的类型，只需更改对象的属性