Question

尝试将第一个滑块设置为宽度为20％，第二个滑块设置为75％

似乎我错过了什么。

Answer 1

问题是，如果查看生成的代码，jQuery会自动将生成的标记插入到HTML中：

<div data-role="content" class="ui-content" role="main" style="
    width: 300px;
    background: blue;
">
        <h2> List </h2>
            <select data-theme="b" data-mini="true" name="slider2" id="flip-a2" data-role="slider" onchange="" class="ui-slider-switch">
                <option value="3">something</option>
                <option value="0">name</option>
            </select><div role="application" class="ui-slider ui-slider-switch ui-btn-down-c ui-btn-corner-all ui-slider-mini" style=""><span class="ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all" role="img" style="width: 100%; ">name</span><span class="ui-slider-label ui-slider-label-b ui-btn-down-c ui-btn-corner-all" role="img" style="width: 0%; ">something</span><div class="ui-slider-inneroffset"><a href="#" class="ui-slider-handle ui-btn ui-shadow ui-btn-corner-all ui-slider-handle-snapping ui-btn-up-b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="b" role="slider" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" aria-valuetext="name" title="name" aria-labelledby="flip-a2-label" style="left: 100%; "><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text"></span></span></a></div></div>

            <select data-theme="e" data-mini="true" name="slider" id="flip-a" data-role="slider" onchange="" class="ui-slider-switch">
                <option value="3">gkhkj</option>
                <option value="0">ok</option>
            </select><div role="application" class="ui-slider ui-slider-switch ui-btn-down-c ui-btn-corner-all ui-slider-mini" style=""><span class="ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all" role="img" style="width: 100%; ">ok</span><span class="ui-slider-label ui-slider-label-b ui-btn-down-c ui-btn-corner-all" role="img" style="width: 0%; ">gkhkj</span><div class="ui-slider-inneroffset"><a href="#" class="ui-slider-handle ui-btn ui-btn-up-e ui-shadow ui-btn-corner-all ui-slider-handle-snapping" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="e" role="slider" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0" aria-valuetext="ok" title="ok" aria-labelledby="flip-a-label" style="left: 100%; "><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text"></span></span></a></div></div> 
    </div>

所以你的＆＃34;偶数＆＃34;选择者被击中。您可以使用＆＃34;：nth-child（4n + 2）＆＃34;和＆＃34;：nth-child（4n + 4）选择正确的模式，但此时你将你的标记与你的css紧密耦合，所以你可能不想这样做。

为您的特定示例添加了JS小提琴，以便在最高http://jsfiddle.net/kE8GJ/10/

上计算H2

jsserymobile的类选择器上的css奇数/偶数对

1 个答案: