Javascript 循环通过主干$el中的tr元素

我已经将视图中的

el

设置为一个特定的表，现在我想逐行遍历该表，并更新第二个和第三个

td

元素

下面是我最近的一次尝试（我的工作就是使用

updateCalc

方法）。第一次使用脊梁骨，所以任何智慧的话都是非常受欢迎的

var IndexedView = Backbone.View.extend({
    initialize: function (args) {
        _.bindAll(this, 'updateCalc')
        _.bindAll(this, 'updateAllocation');

        //Bind modle change event to view event handler
        this.model.bind('change:purchasePayment', this.updateAllocation);
        this.model.bind('change:slidervalue', this.updateAllocation);            
        this.model.bind('change:purchasePayment', this.updateCalc);
        this.model.bind('change:slidervalue', this.updateCalc);
        this.model.bind('change:fixedRate', this.updateCalc);
        this.model.bind('change:returnSpx', this.updateCalc);           
    },
   el: $('#IndexedTable'),  

   //TRYING TO LOOP THROUGH TABLE HERE
   updateCalc: function () {
       //Illust = Allocation * (1 + spx)^cap hit
       //Guar = Allocation * (1 + 0)^cap hit
       var spx = this.model.get('returnSpx');

       this.$el.find('tbody tr').each(function (key, row) {
           console.log(row);
           var capHit = 1;//row.find('td.capHit');
           var illust = this.$el.find('td#allocation').text() * Math.pow((1 + spx), capHit);
           var guar = this.$el.find('td#allocation').text() * Math.pow(1, capHit);
           this.children().eq(1).text(value)
           this.children().eq(2).text(value)
       });
   },
   updateAllocation: function () {
       var value = this.model.get('purchasePayment') * $('#sliderVal').val();
       this.$el.find('td#allocation').text(value);
   }
});

HTML

            <table id="IndexedTable">
                <thead>
                    <tr>
                        <th>
                            Indexed
                        </th>
                    </tr>
                    <tr>
                        <td>
                            Allocation
                        </td>
                        <td id="allocation">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Cap hits:
                        </td>
                        <td>
                            Illust
                        </td>
                        <td>
                            Guar
                        </td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="capHit">
                            0
                        </td>
                        <td>

                        </td>
                        <td>

                        </td>
                    </tr>
                    <tr>
                        <td class="capHit">
                            1
                        </td>
                        <td>

                        </td>
                        <td>

                        </td>
                    </tr>
                    <tr>
                        <td class="capHit">
                            2
                        </td>
                        <td>

                        </td>
                        <td>

                        </td>
                    </tr>
             </table>

索引
分配
上限点击：
虚幻的
瓜尔
0
1.
2.

这是我收到的错误消息

---

根据哈米尔的评论，这可能是一个黑客行为，但我成功了。如果有人有更好的答案，他会欣然接受

   updateCalc: function () {
       //Illust = Allocation * (1 + spx)^cap hit
       //Guar = Allocation * (1 + 0)^cap hit
       var spx = this.model.get('returnSpx');
       this.$el.find('tbody tr').each(function () {
           var capHit = $(this).find('td:first').text();
           var illust = $('#IndexedTable').find('td#allocation').text() * Math.pow((1 + spx), capHit);
           var guar = $('#IndexedTable').find('td#allocation').text() * Math.pow(1, capHit);

           $(this).children().eq(1).text(illust);
           $(this).children().eq(2).text(guar);
       });
   },

你应该试试：

updateCalc: function () {
       //Illust = Allocation * (1 + spx)^cap hit
       //Guar = Allocation * (1 + 0)^cap hit
       var spx = this.model.get('returnSpx');
       // Tie this to that, so you can use it in your function
       var that = this;

       this.$el.find('tbody tr').each(function (key, row) {
           console.log(row); // row refers to your HTML element
           var $row = $(row); // $row will refer to your jQuery object
           var capHit = $row.find('td.capHit').text();
           var illust = that.$el.find('td#allocation').text() * Math.pow((1 + spx), capHit);
           var guar = that.$el.find('td#allocation').text() * Math.pow(1, capHit);
           $row.children().eq(1).text(value)
           $row.children().eq(2).text(value)
       });
   },

您遇到的第一个问题是将HTML元素视为jQuery对象，这就是为什么在控制台中出现错误的原因

第二个问题是，

this

也引用html元素，而不是主干

this

。为了解决这个问题，您可以将

这个

绑定到

那个

上，然后使用它

您还可以使用下划线函数

。.bind

将

此

绑定到主干视图

updateCalc: function () {
       //Illust = Allocation * (1 + spx)^cap hit
       //Guar = Allocation * (1 + 0)^cap hit
       var spx = this.model.get('returnSpx');

       this.$el.find('tbody tr').each(_.bind(function (key, row) {
           console.log(row); // row refers to your HTML element
           var $row = $(row); // $row will refer to your jQuery object
           var capHit = $row.find('td.capHit').text();
           var illust = this.$el.find('td#allocation').text() * Math.pow((1 + spx), capHit);
           var guar = this.$el.find('td#allocation').text() * Math.pow(1, capHit);
           $row.children().eq(1).text(value)
           $row.children().eq(2).text(value)
       }, this));
   },

---

$（this.el）.find（）使用这个..关于：

this.el.find（'tr'）

使用它作为

。每个
或内部都可以获得
td
元素？@EhsanSajjad-出现
未定义的
，我无法循环
el
您的主干视图没有
渲染
函数。你没有把它贴在这里吗？你能做到吗？