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

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

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

类别

usa

将相应的

设置为纯色背景，需要相应电视频道徽标的白色版本

---

使用找到的答案（或），我只能匹配只有一个值但没有两个值的类。如何设置

的内部

HTML，同时使用对象设置其属性？任何帮助或建议都将不胜感激

如果

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

试试这个。，

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

$（'tr[class]'）。每个（函数（）{
var cls=this.className.split（“”）；
var f=$.grep（cls，函数（值，i）{
返回k.indexOf（值）>-1；
})[0];
如果（f）{
this.children[4].innerHTML=''；
}
});

试试看

var$trs=$（'table tr[class]'）；
$.each（网络类、函数（键、属性）{
var clazz='.+key.split（/\s+/）.join（'.'）；
$trs.filter（clazz）.find（'.tv徽标'）.append（$（''，attrs））
})

---

演示：

钥匙的含义是什么

pnc usa

？这是否意味着必须将这些属性分配给同时具有

pnc

和

usa

类别的行，或者分配给以下任一类别的行them@ArunPJohny必须将这些属性分配给同时具有

pnc

和

usa

类的行。如中所示，那么应该将哪个图像分配给行

usa gm pnc

，因为它有3个类没有与3个类匹配的项。。。但是有两个匹配1个或多个类，如

pnc

和

pnc usa

@ArunPJohny这应该有助于

使用：@DaveyJake:那把小提琴是为了Arun的答案…：-）很抱歉。刚刚用同一张图片的黑白版本更新了问题。

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

$('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+'"/>';
}
});

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