如何使用css或jquery定位optgroup的first-child [英] How to target the first-child of an optgroup with css or jquery

问题描述

有没有办法定位标有投资组合的optgroup的第一个孩子，显示Main的名称？

Is there a way to target the first-child of the optgroup labeled "Portfolio" displaying the name "Main"?

我需要将其从仅显示在移动菜单中（它不会显示在桌面菜单中）。这是一个WordPress主题菜单，不能通过菜单小部件访问。菜单是由通过媒体查询触发的mobilemenu.js创建的（我猜）。它通过2个不同的名字/ menuitems显示主页。我希望目标只是那个menuitem和使用css显示：无或jQuery getElementByID解决方案，但到目前为止没有运气。有点在我的头在这一个，因为我似乎不能瞄准它。任何帮助将不胜感激！

I need to remove it from showing only in a mobile menu (it doesn't display in the desktop menu). This is a Wordpress theme menu that is not accessible by Menus widget. The menu is created by a mobilemenu.js triggered by media query (I guess). It is displaying the Home page by 2 different names/menuitems. I was hoping to target just that menuitem and use a css display:none or a jQuery getElementByID solution but so far have had no luck. In a bit over my head on this one as I cannot seem to target it. Any help would be greatly appreciated!

<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>

推荐答案

这种CSS方法可以在某些浏览器中使用：

This CSS approach would work in some browsers:

示例

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

---

， display：none 将无法在所有浏览器中使用。

---

As @canon points out, display:none won't work in all browsers though.

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

If you want to remove it with jQuery, use:

此处的示例

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

或者，如果你想要一个纯JS方法：

Alternatively, if you want a pure JS approach:

这里的例子

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

这篇关于如何使用css或jquery定位optgroup的first-child的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！