javascript - jQuery:使用多个数组来匹配确定 ChildNodes HTML 的类属性?

标签 javascript jquery html arrays

我有一个每周计划,我使用静态表手动更新。

<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 个数组。第一个是类列表:

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

第二个是比赛名单:

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

我要做的是将 compClass 数组分别匹配到 competitions 数组。我想要这样,如果 类匹配 compClass 值之一,其子元素的内部文本 ,将使用相应的 competitions 值自动填充。如果这没有任何意义,这是我正在尝试使用的 jQuery:

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];
        });
      }
    }

  });
});

我尝试使用 $.map() 但无法正常工作。我是 jQuery 的新手——更不用说 JS 了。我究竟做错了什么?任何人都可以提供一些指导吗?任何帮助将不胜感激。

最佳答案

我建议使用一个对象:

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/

关于javascript - jQuery:使用多个数组来匹配确定 ChildNodes HTML 的类属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19219927/

相关文章:

javascript - AngularJS : ng-model binding not updating when changed with jQuery

javascript - 如何从输入字段的文本中获取子字符串并将其显示到另一个HTML元素

javascript - 如何在页面的整个窗口上应用canvas标签?

html - CSS显示:内联 block 和宽度:100%在IE6和IE7上不起作用

javascript - 将组元素重新排序为特定顺序

javascript - 使用jquery遍历html表行以获取<td>单元格内的div id

javascript - 如果未正确加载图像,如何显示默认图像?

jquery - 将.css元素的正确语法添加到html标签的droppable中

html - 内容和背景图片之间的半透明层-CSS

javascript - jQuery自定义函数问题