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>

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>设置为纯色背景，需要相应电视频道徽标的白色版本。

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

Answer 1

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

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

尝试

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

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

3 个答案: