Question

我有一个<ul>元素可以动态添加它<li>，我试图让第一个<li>稍微宽一点width休息的$('.list').css({ listStyle: 'none', padding: '0', height: '100%', overflowX: 'scroll', }); $('.item-wrapper').css({ background:'#FFFFFF', width: '60%', margin: '5px', }); $('.item-wrapper').first().css({ width:'63% !important', });为63％，而其他人只有60％，但由于某种原因，第一个只获得60％，任何想法为什么？

我不能使用CSS文件，这必须只是Javascript。

这是我的代码：

<ul class="list" style="list-style: none; padding: 0px; height: 100%; overflow-x: scroll;">
  <li class="item">
    <div class="item-wrapper" style="width: 60%; margin: 5px; background: rgb(255, 255, 255);">
        <img class="thumbnail" src="images/frame_0001.png" alt="tumbnail" style="width: 25%;">
    </div>
  </li>
  <li class="item">
    <div class="item-wrapper" style="width: 60%; margin: 5px; background: rgb(255, 255, 255);">
        <img class="thumbnail" src="images/frame_0002.png" alt="tumbnail" style="width: 25%;">
    </div>
  </li>
</ul>

修改我没有添加生成的标记，这里是：

new Date(..).getTime()

编辑2：我重新安排了.css（）函数的顺序，但仍然没有好处

Answer 1

这只是因为您使用了!important，将其删除。

然后会读到：

$('.item-wrapper').first().css({
  width:'63%',
});

除此之外，你的语法很好。你的方法有点可疑，但你显然有其他地方的要求，以避免CSS。

更多关于jQuery与!important的问题：

http://bugs.jquery.com/ticket/11173

注意：由于您现在没有优先权概念，因此订购非常重要！也就是说，如果您在将宽度设置为其他地方的宽度为60％之前将宽度设置为63％的方式重构您的javascript，它将保持60％。

Answer 2

尝试重新排序

$('.item-wrapper').css({
  background:'#FFFFFF',
  width: '60%',
  margin: '5px'
});

$('.item-wrapper').first().css({
  width:'63% !important'
});

请注意，您正在选择.item-wrapper元素，然后应用样式。此后不会将效果元素添加到ul

Answer 3

在函数内部尝试

    $(document).ready(function(){
$('.list').css({
  listStyle: 'none',
  padding: '0',
  height: '100%',
  overflowX: 'scroll',
});

$('.item-wrapper').first().css({
  width:'63% !important',
});

$('.item-wrapper').css({
  background:'#FFFFFF',
  width: '60%',
  margin: '5px',
});

    })

JSFIDDLE

动态添加的元素不会采取适当的CSS（仅限js）

3 个答案: