1

Trying to set the first slider with a width of 20% and second with 75%

http://jsfiddle.net/kE8GJ/5/

Seems I'm missing something.

4

1 回答 1

2

问题是，如果您查看生成的代码，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>

所以你的两个“偶数”选择器都被击中了。您可以使用 ":nth-child(4n+2)" 和 ":nth-child(4n+4) 来选择正确的模式，但此时您将标记与 css 紧密耦合，因此您可能不想要要做到这一点。

为您的特定示例添加了 JS fiddle，说明了顶部的 H2 http://jsfiddle.net/kE8GJ/10/

于 2012-07-22T23:24:38.920 回答