jQuery的：使用多个阵列以匹配的类属性决定子节点的HTML？ [英] jQuery: Using Multiple Arrays to Match Class Attribute Which Determines ChildNodes HTML?

问题描述

我有一个每周一次，我手动更新使用静态表。

I have a weekly schedule that I update manually using a static table.

<table>
  <tr class="live al tv">
    <td>October 2</td>
    <td>12:30 pm</td>
    <td class="competition"></td>
    <td>Team A v Team B</td>
    <td class="field">1</td>
  </tr>
  <tr class="be tv">
    <td>October 2</td>
    <td>6 pm</td>
    <td class="competition"></td>
    <td>Team C v Team D</td>
    <td class="field">2</td>
  </tr>
  <tr class="ga tv">
    <td>October 3</td>
    <td>12:30 pm</td>
    <td class="competition"></td>
    <td>Team D v Team A</td>
    <td class="field">3</td>
  </tr>
  <tr class="live de tv">
    <td>October 3</td>
    <td>6 pm</td>
    <td class="competition"></td>
    <td>Team C v Team B</td>
    <td class="field">4</td>
  </tr>
</table>

我有2个阵列。这第一个是类列表：

I have 2 arrays. This first one is the list of classes:

var compClass = new Array();
compClass[0] = 'al',
compClass[1] = 'be',
compClass[2] = 'ga',
compClass[3] = 'de';

二是比赛的名单：

The second one is the list of competitions:

var competitions = new Array();
competitions[0] = 'alpha',
competitions[1] = 'beta',
competitions[2] = 'gamma',
competitions[3] = 'delta';

我试图做的是匹配 compClass 阵列，分别为比赛阵列。我希望它这样如果＆LT; TR＆GT; 类匹配 compClass 值中的一个，内文其子元素，＆LT; TD类=竞争＆GT;＆LT; / TD＆GT; ，将使用相应的比赛自动填充值。如果这没有任何意义，这里是jQuery的我试图使用方法：

What I'm trying to do is match the compClass array, respectively, to the competitions array. I want it so that if the <tr> class matches one of the compClass values, the inner text of its child element, <td class="competition"></td>, will auto-populate using the corresponding competitions value. If that doesn't make any sense, here's the jQuery I'm trying to use:

jQuery(function($){
  $(document).ready(function() {

    var rowClass = $('table tr[class*=" "]'),
        compCell = $('td.competition'),
        fieldCell = $('td.field');

    function setCompetition() {
      for(var i=0;i<compClass.length;++i) {
        $('tr').attr('class',compClass[i]).each(function() {
          this.children[2].innerHTML = competition[i];
        });
      }
    }

  });
});

我试着用 $。图（），但我无法得到它的工作。我是用jQuery新手 - 让一般单独JS。我究竟做错了什么？任何人都可以提供一些指导？任何帮助将大大AP preciated。

I tried using $.map() but I couldn't get it to work. I'm a novice with jQuery--let alone JS in general. What am I doing wrong? Can anyone offer some guidance? Any help would be greatly appreciated.

推荐答案

我会建议使用一个对象：

I would suggest using an object:

var compClass = {
    'al' : 'alpha',
    'be' : 'beta',
    'ga' : 'gamma',
    'de' : 'delta'
}
var k = Object.keys(compClass);

$('tr[class]').each(function() {
    var prop = $.grep(this.className.split(' '), function(value) {
                    return k.indexOf(value) > -1;
               })[0];

    if (prop) this.children[2].innerHTML = compClass[prop];
});

http://jsfiddle.net/3wGmR/1/

这篇关于jQuery的：使用多个阵列以匹配的类属性决定子节点的HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！