我将如何动态创建使用CSS3的jQuery UI元素？

我真的不知道如何解释这一点，但我想将不同的颜色样式应用于动态创建的jQuery UI按钮。我认为:nth-child(x)或nth-of-type(x)会有所帮助，但都没有奏效。我是按照正确的顺序排列它们，还是有其他可以帮助的事情？我将如何动态创建使用CSS3的jQuery UI元素？

我的JS：

var listContent = '<div id="PlayerPicker">'; 
$(xml).find('Character').each(function() { 
listContent += '<input type="radio" id="RB_' + $(this).attr('First') + 
    $(this).attr('Last') + '" name="player" class="ui-button-text" 
    style="background-color: transparent;"><label for="RB_' + 
    $(this).attr('First') + $(this).attr('Last') + '">' + $(this).attr('Title') 
    + ' ' + $(this).attr('First') + ' ' + $(this).attr('Middle').charAt(0) + '. 
    ' + $(this).attr('Last') + '</label>'; 
}); 
listContent += '</div>'; 
$('#Wrapper').html(listContent); 
$('#PlayerPicker').buttonset();

我的CSS：

#PlayerPicker .ui-button-text { 
    background: #ff3d3d; 
    background: -moz-linear-gradient(top, hsl(240,100%,62%) 1%, hsl(240,100%,15%) 48%, hsl(240,100%,62%) 49%, hsl(240,100%,15%) 68%, hsl(240,100%,50%) 95%, hsl(240,97%,24%) 100%); 
    background: -webkit-linear-gradient(top, hsl(240,100%,62%) 1%,hsl(240,100%,15%) 48%,hsl(240,100%,62%) 49%,hsl(240,100%,15%) 68%,hsl(240,100%,50%) 95%,hsl(240,97%,24%) 100%); 
    background: linear-gradient(to bottom, hsl(240,100%,62%) 1%,hsl(240,100%,15%) 48%,hsl(240,100%,62%) 49%,hsl(240,100%,15%) 68%,hsl(240,100%,50%) 95%,hsl(240,97%,24%) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3d3d', endColorstr='#780202',GradientType=0); 
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
    color: white; 
    border-radius: 99px; 
    font-size: 14pt; 
} 

#PlayerPicker:nth-child(2) .ui-button-text { 
    background: #ff3d3d; 
    background: -moz-linear-gradient(top, hsl(330,100%,62%) 1%, hsl(330,100%,15%) 48%, hsl(330,100%,62%) 49%, hsl(330,100%,15%) 68%, hsl(330,100%,50%) 95%, hsl(330,97%,24%) 100%); 
    background: -webkit-linear-gradient(top, hsl(330,100%,62%) 1%,hsl(330,100%,15%) 48%,hsl(330,100%,62%) 49%,hsl(330,100%,15%) 68%,hsl(330,100%,50%) 95%,hsl(330,97%,24%) 100%); 
    background: linear-gradient(to bottom, hsl(330,100%,62%) 1%,hsl(330,100%,15%) 48%,hsl(330,100%,62%) 49%,hsl(330,100%,15%) 68%,hsl(330,100%,50%) 95%,hsl(330,97%,24%) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3d3d', endColorstr='#780202',GradientType=0); 
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
    color: white; 
    border-radius: 99px; 
}

UPDATE：Here's my fiddle，@jmargolisvt。 JS已经被简化了，但CSS是一样的。

来源

2016-03-07 Shortstuff81000

请提供一份有关目前工作的[fiddle]（https://jsfiddle.net/）。 – jmargolisvt

您是否试过'#PlayerPicker .ui-button-text：nth-child（2）'而不是'#PlayerPicker：nth-child（2）.ui-button-text'？ – nnnnnn

@nnnnnn是的。多次。它没有什么区别。 – Shortstuff81000

检查您使用JavaScript创建的HTML，您可以看到您需要标签标签上的样式集。

#PlayerPicker .ui-button-text label {...} and 
#PlayerPicker .ui-button-text:checked label {...}

来源

2016-03-07 09:16:29

我在我的小提琴中尝试过;它将按钮重置为其默认主题。我认为这是因为'.ui-button-text'已经处理了标签。不过谢谢你的建议。 – Shortstuff81000

我将如何动态创建使用CSS3的jQuery UI元素？

回答

相关问题