Question

var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );

if(iOS) {
   $('ul.dk_options_inner').find('li').find('a').css('font-size', '60px');
}

我想申请60px;到无序列表链接中的字体（见下文）。

<ul class="dk_options_inner" role="main" aria-hidden="true">
    <li><a data-dk-dropdown-value="">This artist should sing...</a></li>
    <li><a data-dk-dropdown-value="VoiceDontCloseYourEyes">Don't Close Your Eyes</a></li>
    <li><a data-dk-dropdown-value="VoiceItGoesLikeThis">It Goes Like This</a></li>
    <li><a data-dk-dropdown-value="VoiceHaveALittleFaithInMe">Have A Little Faith In Me</a></li>
    <li><a data-dk-dropdown-value="VoiceAnywhereWithYou">Anywhere With You</a></li>
    <li><a data-dk-dropdown-value="VoiceAnymore">Anymore</a></li>
    <li><a data-dk-dropdown-value="VoiceRun">Run</a></li>
</ul>

网页上有多个ul.dk_options_inner，所以我希望它适用于所有人。

感谢任何帮助

Answer 1

实际上，它不是相同的代码。简单地执行$('ul.dk_options_inner').find('li').find('a').css('font-size', '60px');将最终循环遍历与选择器匹配的每个项目并单独设置样式属性。这是非常低效的，如果你有数百个元素，它将导致问题。

更改项目上的类是一个更好的主意，但您仍然遇到同样的问题，因为您正在更改N个项目的属性，这可能是一个很大的数字。更好的解决方案可能是在一个单个父项或少数父项上更改类，然后使用css中的“Cascade”命中目标项。这适用于大多数情况，但不是全部。

ul.dk_options_inner.ios-font{
  font-size:60px;    
}

<ul class="dk_options_inner" role="main" aria-hidden="true">
    <li><a data-dk-dropdown-value="">This artist should sing...</a></li>
    <li><a data-dk-dropdown-value="VoiceDontCloseYourEyes">Don't Close Your Eyes</a></li>
    <li><a data-dk-dropdown-value="VoiceItGoesLikeThis">It Goes Like This</a></li>
    <li><a data-dk-dropdown-value="VoiceHaveALittleFaithInMe">Have A Little Faith In Me</a></li>
    <li><a data-dk-dropdown-value="VoiceAnywhereWithYou">Anywhere With You</a></li>
    <li><a data-dk-dropdown-value="VoiceAnymore">Anymore</a></li>
    <li><a data-dk-dropdown-value="VoiceRun">Run</a></li>
</ul>

var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );

if(iOS) {
    $('ul.dk_options_inner').addClass('ios-font');
}

将css仅应用于iOS设备上的无序列表中的链接

1 个答案: