0

我尝试更改列表中每个项目的顶部填充，但它根本没有影响它们，我想在使用的浏览器是 Internet Explorer 时这样做。我尝试了以下方法：

if (navigator.userAgent.indexOf('.NET') !== -1) {
    $('#eventTicker li').css('padding-top', '10px');
}

这是在 JQuery 中更改另一个元素内的元素样式的正确方法吗？如果是这样，为什么它不影响列表项？

这就是我的列表 HTML 的样子：

        <div id="eventTickerDiv">
            <ul id="eventTicker">
            </ul>
            <div id="hideTickerDiv"></div>
        </div>

这是一个列表项的样子：

<li>Date - 2013/04/22, 16:58:32,<br/> Device - DEM002,<br/> Acceleration - 203.34,<br/> Intensity - 21</li>

我尝试设置样式更改的功能如下：

function initializeEventTicker() {
    isTickerShown = true;
    //this animates the div that contains the list
    $('#eventTickerDiv').gx
        (
            {
                'height': '95%',
            },
            1000,

            'Linear',
            function (el) {

            }
        );
    if (navigator.userAgent.indexOf('.NET') !== -1) {
        $('#eventTicker li').css('padding-right', '10');
    }
    // this initiates an animation for the list to make it look like it's looping it's contents
    $('#eventTicker').totemticker({
        row_height: '160px',
        next: null,
        previous: null,
        stop: null,
        start: null,
        mousestop: true,
        speed: 800,
        interval : 2000
    });
}

任何帮助将不胜感激。

4

1 回答 1

2

也许您应该发布更多 HTML 或仔细检查您的 ID 名称。我使用了您提供的 ID 名称，并且使此功能正常工作……即使在 IE 中！

您编写的代码$('#eventTicker li').css('padding-top', '10px');看起来完全正确。

参见示例@：

JSFIDDLE

$("#selChange").on("change", function(e) {
    $('#eventTicker li').css('padding-top', $(this).val());
});

要仔细检查您的选择是否触发：

if (navigator.userAgent.indexOf('.NET') !== -1) {
    // $('#eventTicker li').css('padding-top', '10px'); change this line to:
    console.log("Get Li Length:\t", $('#eventTicker li').css('padding-top', '10px').length);
    // if you ever see a "0" in the console, then this select is missfiring
}

如果这是一个“时间”问题：

//  Test if this is a timing issue by placing what's in your IF statement in a Timer, 
//    If it fires this way, then you know the issue is simple:
//      Your li's are not being added to DOM till AFTER the IF statement is fired, 
//      in which case you may want to rethink "where" you call the IF statement
if (navigator.userAgent.indexOf('.NET') !== -1) {
    setTimeout(function() { $('#eventTicker li').css('padding-top', '10px'); }, 2000);
    // This timer is set at 2 seconds (2000 in param there) and should give PLENTY of time to KNOW the LI's are Loaded in the DOM
    // If this works, for a temp solution (till you find better place for if statement)
    //    you could lower the time from 2000 to 100 and probably get same result without interference to your page as is
}
于 2013-04-22T20:27:51.097 回答