nth-child CSS selectors for jqx-menu-dropdown

[syaoMember]

I can’t get ID’s attached to the second-level ‘s (the menu’s getting generated by the DB) of a nav menu, so I need to be able to reference them by nth-child. (Each ul nested under the top level li’s needs to match the background color of its li parent and have its own highlight color and text colors) However, jqxMenu completely mangles the HTML code of the menu upon page load, making this impossible to do traditionally. Is there any way to do this that works consistently? (That isn’t dependent on constantly changing ID’s, etc.) I’ll be trying to come up with something in JQuery in the meantime.

[Peter StoevKeymaster]

Hi,

Sorry, but I cannot understand your requirement. How do you load the Menu and how do you initialize it? Could you provide a sample code which demonstrates your scenario.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[syaoMember]

The menu loads through a separate .js file that’s included with the page, and I know it’s loading properly since I see the changes in the HTML/DOM in the final page’s source code.

I’m not completely sure where the original HTML is from now(it’s now coming from a JSON feed someone else developed), but it used to come from a hard-coded standard list, something like this:

<ul>
  <li>Item1</li>
  <li>Item2
    <ul>
      <li>i2Sub1</li>
      <li>i2Sub2</li>
    </ul>
  </li>
  <li>Item3</li>
  <li>Item4
    <ul>
      <li>i4Sub1</li>
      <li>i4Sub2</li>
      <li>i4Sub3</li>
    </ul>
  </li>
</ul>

Regardless of whether it’s from the hard-coded list or the JSON feed, the output is the same, and works fine. The problem is that the HTML markup is laid out in a way that I can’t, or can’t figure out how to, use CSS child selectors to select the 2nd-level ul’s, because these ul’s are at the bottom of the page (final HTML output) nested inside a bunch of divs which have no way of being uniquely identified. (Their jqxMenu-generated ID’s change on every page load.) The final page is something like this:

<header><nav>
<div id="jqxMenu">
  <div something something>
    <ul>
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>
  </div>
</div>
</nav></header>
<!-- rest of page -->
<footer><!-- footer stuff --></footer>
<div class="jqx-menu-popup jqx-something jqx-etc">
<div>
  <ul>
    <li>i2Sub1</li>
    <li>i2Sub2</li>
  </ul>
</div>
</div>
<div class="jqx-menu-popup jqx-something jqx-etc">
<div>
  <ul>
    <li>i4Sub1</li>
    <li>i4Sub2</li>
    <li>i4Sub3</li>
  </ul>
</div>
</div>

I can’t find an easy way to select the ul’s that correspond to the i2Sub and i4Sub items. Each dropdown needs a different background color, text color, highlighted bg and highlighted text color. I cannot put ID’s into the ul’s either. I cannot simply use .jqx-menu-popup:nth-child() here because there are other jqxWidgets’ dropdowns populating the bottom of the page.

Thanks.

[Peter StoevKeymaster]

Hi,

1. The simplest solution is to add your custom CSS classes before the Menu’s initialization.
2. Another solution is to access the sub items by using the Menu’s items array.

var items = $("#jqxMenu").jqxMenu('items');
var item = items[0];
var itemSubMenuElement = item.subMenuElement;
var itemLIElement = item.element;

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[syaoMember]

Thanks, I’ll look into accessing the menu’s array. I’m unable to manipulate the ID’s from the JSON feed as far as I’m aware, so the 2nd option may do the trick.

[Author]

Posts