如何使用 css 或 jquery 定位 optgroup 的第一个孩子答案

【问题标题】：How to target the first-child of an optgroup with css or jquery如何使用 css 或 jquery 定位 optgroup 的第一个孩子
【发布时间】：2015-12-19 03:52:02
【问题描述】：

有没有办法定位标记为“组合”并显示名称“主要”的 optgroup 的第一个子项？

我需要将其从仅显示在移动菜单中的内容中删除（它不会显示在桌面菜单中）。这是菜单小部件无法访问的 Wordpress 主题菜单。菜单是由媒体查询（我猜）触发的 mobilemenu.js 创建的。它通过 2 个不同的名称/菜单项显示主页。我希望只针对该菜单项并使用 css display:none 或 jQuery getElementByID 解决方案，但到目前为止还没有运气。在这个问题上我有点过头了，因为我似乎无法瞄准它。任何帮助将不胜感激！

<div class="mobilenavi">
  <select id="mm0" class="mnav" style="display: inline-block;">
    <option value="undefined">Click here:</option>
    <option value="http://somedomain.com/">Home</option>
    <optgroup label="Portfolios">
      <option value="#">Main</option>
      <option value="http://somedomain.com/portfolio-1/">Portfolio 1</option>
      <option value="http://somedomain.com/portfolios/portfolio-2/">Portfolio 2</option>
      <option value="http://somedomain.com/portfolios/portfolio-3/">Portfolio 3</option>
      <option value="http://somedomain.com/portfolios/beach-portfolio/">Beach Portfolio</option>
      <option value="http://somedomain.com/portfolios/photos/">Photos</option>
    </optgroup>
    <option value="http://somedomain.com/contact/">Contact Kim</option>
  </select>
</div>

【问题讨论】：

标签： jquery css optgroup

【解决方案1】：

这种 CSS 方法适用于某些浏览器：

Example Here

optgroup[label="Portfolios"] option:first-child {
    display:none;
}

正如@canon 指出的那样，display:none 并非在所有浏览器中都有效。

如果你想用 jQuery 删除它，使用：

Example Here

$('optgroup[label="Portfolios"] option:first-child').remove();

或者，如果您想要纯 JS 方法：

Example Here

var el = document.querySelector('optgroup[label="Portfolios"]');
el.removeChild(el.getElementsByTagName('option')[0]);

【讨论】：

+1 表示选择器...但 display:none 表示 <option> 并不普遍兼容。
@canon 感谢您指出这一点，我不知道 :)
Josh Crozier，感谢您提供全面、多方法的答案。没有什么对我有用。调整大小以触发针对移动设备尺寸的媒体查询时，CSS 在桌面浏览器中有效，但不适用于 Android Chrome 浏览器。在没有运气的 wp_head/wp_footer 主题挂钩之前，尝试在页脚和页眉中添加 jquery/js 解决方案。我认为 js/jquery 可以在页脚中使用 $(function() {//code});但那里没有运气。显然，我处于 jquery 学习曲线的早期。我确实认为您的答案将在正常主题中起作用，并将标记为解决方案。感谢您的帮助。

【解决方案2】：

$('optgroup option:nth-child(1)').hide();工作吗？

【讨论】：