1

我使用以下静态表更新每周计划：

<table>
  <tr class="live gm fsp">
    <td>Oct. 7</td>
    <td>12:30 pm</td>
    <td class="prog">Show 1</td>
    <td>Team A v Team B</td>
    <td class="tv-logo"></td>
  </tr>
  <tr class="gm dtv">
    <td>Oct. 7</td>
    <td>4 pm</td>
    <td class="prog">Show 2</td>
    <td>Team C v Team D</td>
    <td class="tv-logo"></td>
  </tr>
  <tr class="usa gm pnc">
    <td>Oct. 7</td>
    <td>6 pm</td>
    <td class="prog">Show 3</td>
    <td>Team E v Team F</td>
    <td class="tv-logo"></td>
  </tr>
  <tr class="gm pnc">
    <td>Oct. 7</td>
    <td>8 pm</td>
    <td class="prog">Show 3</td>
    <td>Team E v Team F</td>
    <td class="tv-logo"></td>
  </tr>
</table>

元素的class属性<tr>将决定其<td class="tv-logo"></td>子元素的内部 HTML。内部 HTML 应该是<img/>学生电视频道徽标的链接。图像src和alt（我也将用于它的title）属性包含在以下对象中：

var networkClass = {
  'fsp' : {
    'src' : '/images/page-items/fsp.png',
    'alt' : 'First Student Productions'
  },
  'dtv' : {
    'src' : '/images/page-items/dtv.png',
    'alt' : 'Digital Travel Vlog'
  },
  'pnc' : {
    'src' : 'http://4.bp.blogspot.com/-i9U1bdKwzZk/UR3WRV2vDsI/AAAAAAAAAjw/FqBP37bYf5Y/s100/BMW_logo_black_white.png',
    'alt' : 'Production New Cinema'
  },
  'usa pnc' : {
    'src' : 'http://www.qservice.ro/assets/images/brands/slider_16.png',
    'alt' : 'Production New Cinema'
  }
}

该类usa将对应设置<tr>为具有纯色背景，这需要相应电视频道徽标的白色版本。

使用此处找到的答案（或http://jsfiddle.net/3wGmR/1/），我只能匹配具有单个值而不是 2 个值的类。如何设置内部<img/>HTML，<td class="tv-logo"></td>同时使用对象设置其属性？任何帮助或建议将不胜感激！

4

3 回答 3

0

如果其中的键networkClass是有效的 CSS 选择器，那么您可以使用.is来确定相关元素是否满足它们，并通过这种方式达到您正在寻找的结果。

键不是选择器，但如果我们可以假设它们是空格分隔的 CSS 类名列表，则很容易将它们转换为选择器：

var key = "pnc usa";
var selector = key.replace(/(^|\s+)(\S+)/g, ".$2"); // ".pnc.usa"

所以你可以这样写：

$('tr[class]').each(function() {
    var $tr = $(this);
    $.each(networkClass, function(key, attributes) {
        var selector = key.replace(/(^|\s+)(\S+)/g, ".$2");
        if ($tr.is(selector)) {
            $tr.children(".tv-logo").append($("<img>", attributes));
            break;
        }
    });
});

但是，您必须注意这里的细节：由于.foo严格来说是一个不太具体.foo.bar的选择器，并且首先匹配的选择器将确定结果，因此您必须注意让更具体的选择器总是出现在不太具体的选择器之前networkClass目的：

var networkClass = {
  // this
  'pnc usa' : {
    'src' : '/images/page-items/pnc-white.png',
    'alt' : 'Production New Cinema'
  }
  // must appear before this
  'pnc' : {
    'src' : '/images/page-items/pnc.png',
    'alt' : 'Production New Cinema'
  },
}
于 2013-10-07T10:49:02.237 回答
0

试试这个。，DEMO

$('tr[class]').each(function() {
var cls = this.className.split(' ');

var f = $.grep(cls, function(value, i) {
    return k.indexOf(value) > -1;
})[0];

if (f) {        
    this.children[4].innerHTML = '<img src="'+compClass[f].src+'" alt="'+compClass[f].alt+'"/>';
}
});
于 2013-10-07T10:50:51.920 回答
0

尝试

var $trs = $('table tr[class]');
$.each(networkClass, function (key, attrs) {
    var clazz = '.' + key.split(/\s+/).join('.');
    $trs.filter(clazz).find('.tv-logo').append($('<img />', attrs))
})

演示：小提琴

于 2013-10-07T10:51:14.660 回答