jQuery：使用对象值和子值设置元素属性

Question

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

<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>

<tr> 元素的class 属性将确定其<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> 设置为具有纯色背景，这需要相应电视频道徽标的白色版本。

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

Answer 1

试试

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

演示：fiddle

Answer 2

试试这个。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+'"/>';
}
});

Answer 3

如果 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'
  },
}