jQuery的：設置元素屬性使用對象值和子值

我使用下面的靜態表更新每週計劃：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>

的<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/），我只能匹配類，如果它有一個單一的值，但不是2個值。如何設置內部<img/><td class="tv-logo"></td>的HTML，同時還使用該對象設置它的屬性？任何幫助或建議將不勝感激！

來源

2013-10-07 DaveyJake

是什麼密鑰'pnc usa'的含義？是否意味着必須將這些屬性分配給同時具有「pnc」和「usa」類或其中任一個的行 –

@ArunPJohny必須將這些屬性分配給具有「pnc」和「usa」類的行。如http://jsfiddle.net/arunpjohny/3JCab/2/中的 – DaveyJake

？ –

如果networkClass中的鍵是有效的CSS選擇器，那麼您可以使用.is來確定問題中的元素是否滿足它們，並以此方式達到您正在查找的結果。

的關鍵是沒有選擇的，但如果我們可以假設他們是CSS類名的空格分隔的列表可以很容易地將它們轉換成選擇：

所以，你可以這樣寫：

$('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-07 10:49:02 Jon

這是它的小提琴：http://jsfiddle.net/3JCab/5/ – DaveyJake

@DaveyJake：那個小提琴是Arun的答案...... :-) – Jon

對不起。只是使用相同圖像的黑白版本更新了問題。 – DaveyJake

試試這個，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-07 10:50:51

嘗試

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

來源

2013-10-07 10:51:14

jQuery的：設置元素屬性使用對象值和子值

回答

相關問題