I list my categories with wp_list_categories().
When there are subcategories, the result/html gives by default :
<ul>
<li>category parent</li>
<ul class="children">
<li>category children</li>
</ul>
</ul>
I would like to remove the ul list for the catégories children, to have a simple list of categories:
<ul>
<li>category parent</li>
<li>category children</li>
</ul>
Do you know how can it be done?
The easiest way is using jQuery
var innerUl = $(".children").html();
$(".children").remove();
$("ul").append(innerUl);
Or you can use .unwrap(), it would be a better solution.
Related
I am using reactjs and assume that I have a list of items like:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
And I want change the class with styled-components. If a click 'Item 1', I want to give a style to it and if I click the other one, I want to remove active class from 'Item 1' and give it to 'Item 2'
Is it possible with styled-components?
You can do something like
<ul>
<li className={`class1 ${this.state.isItem1Active ? "active" : ""}`}>Item 1</li>
<li className={`class1 ${this.state.isItem2Active ? "active" : ""}`}>Item 2</li>
</ul>
Now the className class1 will be applied to both the Items and the className active will be applied only to the element which is active
I have the following array / sub array structure
"filters": {
"types": {
"34": "Ford",
"22": "Jeep",
"18": "Porsche",
},
"locations": [
"Earth",
"Mars",
"Moon",
]
}
and the following handlebars template
{{#if filters}}
{{#each filters}}
<div class="cars">
<ul class="cars__list">
<li class="cars-{{#key}}__title">Filter by {{#key}}:</li>
<li class="cars-{{#key}}__filters">
<ul>
<li class="cars-{{#key}}">View All</li>
{{#each this}}
<li class="cars-{{*want to access filters[key]*}} color={{#key}}">{{this}}</li>
{{/each}}
</li>
</li>
</ul>
</div>
{{/each}}
{{/if}}
I'm having trouble accessing the filters[types] and filters[locations] within the each this loop.
In my CSS I'm using a classes called .cars-type and .cars-location. I want to be able to style each list separately and unfortunately target each li with a class. I want to apply these styles within the each this loop.
I can do it within the filters loop by using {{#key}} but not in the each this loop
I've tried
<li class="cars-{{../filters}}">{{this}}</li>
but this just returns the car type like ford - I want the key ie. '34' in this case
<li class="cars-{{lookup ../filters #index}}">{{this}}</li>
using handlebars helper lookup but again no luck
<li class="cars-{{../this}}">{{this}}</li>
and the above which gives me [object Object]
I've checked out handlebars - is it possible to access parent context in a partial?, handlebars.js: relative paths in partials not working and Lookup helper in handlebars but no luck with any of the solutions
EDIT Here's the HTML output that I want to produce
<div class="cars">
<ul class="cars__list">
<li class="cars-types__title">Filter by types:</li>
<li class="cars-types__filters">
<ul>
<li class="cars-types">View All</li>
<li class="cars-types color-34">Ford</li>
<li class="cars-types color-22">Jeep</li>
<li class="cars-types color-18">Porsche</li>
</ul>
</li>
</ul>
<ul class="cars__list">
<li class="cars-locations__title">Filter by locations:</li>
<li class="cars-locations__filters">
<ul>
<li class="cars-locations">View All</li>
<li class="cars-locations color-0">Earth</li>
<li class="cars-locations color-1">Mars</li>
<li class="cars-locations color-2">Moon</li>
</ul>
</li>
</ul>
</div>
You should reconsider your HTML because a ul cannot be a direct child of another ul. See https://developer.mozilla.org/en/docs/Web/HTML/Element/ul#Usage_context
With that said, we can solve your problem. The Handlebars docs have our answer:
Nested each blocks may access the interation variables via depth based
paths. To access the parent index, for example, {{#../index}} can be
used.
Therefore, your problematic line should look like the following:
<li class="cars-{{#../key}} color-{{#key}}">{{this}}</li>
Below is my HTML
<ul><li class="section">BROADCASTING</li>
<ul>
<li class="subsection"></li>
<li class="circle">STATION BREAK</li>
<li class="circle">Labor pains, hunger pangs</li>
<li class="circle">Wake-up call for Dream Team</li>
<li class="circle">News crew turns rescuer</li>
<li class="circle">Chopper safety had been challenged</li>
<li class="circle">Nielsen adds Dayton..</li>
<li class="circle">Mondale watch</li>
<li class="circle">Those 70s clearances</li>
<li class="circle">Oscar goes to ABC</li>
<li class="circle">Hearst-Argyle gives a green light</li>
<li class="circle">Finding Geena Davis</li>
<li class="circle">Syndication Wrap-up</li>
<li class="circle">CBS TV news pioneer dies at 86</li>
<li class="circle">New York anchor remembered</li>
<li class="circle">News sharing in West Virginia</li>
<li class="circle">News dropping in Orlando</li>
<li class="subsection">Null</li>
<li class="circle">GET WITH THE PROGRAM</li>
<li class="subsection">PEOPLE'S CHOICE</li>
<li class="circle">Syndication as branding</li>
</ul>
</ul>
Now i want to seperate sections and subsections and get the url inside subsections.
i have go to the each sections
Now as per the HTML structure, section is in seperate li which closes before subsection opens, so once i have reached section, i have to move back to ul and then have to continue to get subsection
However when i try ../ to go back to the ul (the one before section), it says ivalid token
This is what i tried to come back to the parent one.
HtmlNodeCollection sections = doc.DocumentNode.SelectNodes("//ul/li[#class='section'][contains(text(), 'BROADCASTING')]../ul");
but this does not works
Can anyone tell me where i am going wrong, it will be a kind help.
You need to change your xpath expression a bit:
var subsections = doc.DocumentNode.SelectNodes("//ul/ul[preceding-sibling::li[#class='section' and .='BROADCASTING']]/li[#class='subsection']");
It searches for <ul> inside <ul> that has <li class="section">BROADCASTING</li> as a previous sibling, and then searches for <li class="subsection"> inside it.
So the code above selects all the subsections under BROADCASTING section.
Hope this helps.
Please help me solve my big problem.
in my on-line shopping project i created a dynamic Category List (with Infinite Level Depth) Implemented in a Single Table in DB with Self join.
the schema is like below:
(source: aspalliance.com)
Update
I want to use a JQuery plugin to make a Multi Level Menu bar. this plugin uses <ul> and <li> elements so I should transform the DB table to <ul> and <li>. the result should like this:
<ul>
<li>Clothing 1
<ul>
<li>Trousers 2
<ul>
<li>Mens trousers 3</li>
<li>Ladies trousers 3</li>
</ul>
</li>
<li>Jackets 2</li>
<li>Shirts 2</li>
<li>Shoes
<ul>
<li>Mens shoes 3
<ul>
<li>Mens formal shoes 4</li>
<li>Mens casual shoes 4</li>
</ul>
</li>
<li>Kids shoes 3</li>
<li>Ladies shoes 3</li>
</ul>
</li>
</ul>
</li>
<li>Cars 1
<ul>
<li>Small cars 2</i>
</ul>
</li>
</ul>
I can use a nested data control(like repeater control) but you know, with this solution i just can implement a list with non-infinite hierarchical tree structure.
please help me! any suggestion?? I googled the web but not a suitable way found. I use ASP.net 3.5 and LINQ.
what is the best way?
Use this recursive method
private string GenerateUL(IQueryable<Menu> menus)
{
var sb = new StringBuilder();
sb.AppendLine("<ul>");
foreach (var menu in menus)
{
if (menu.Menus.Any())
{
sb.AppendLine("<li>" + menu.Text);
sb.Append(GenerateUL(menu.Menus.AsQueryable()));
sb.AppendLine("</li>");
}
else
sb.AppendLine("<li>" + menu.Text + "</li>");
}
sb.AppendLine("</ul>");
return sb.ToString();
}
like this
DataClasses1DataContext context = new DataClasses1DataContext();
var s = GenerateUL(context.Menus.Where(m => m.ParentID == null));
Response.Write(s);
I think ASP.NET TreeView is your friend.
Take a look here too.
Also, you might want to use a dynamically created nested DataGrid or Repeater, here is an example (you can make it dynamic, so the nested (or even the parent) repeaters are genenerated programmatically.
void GenerateChildren(Menu menu)
{
//Create DataGridRow/RepeaterRow/TreeViewNode/whatever for this menu
menu.Children.Load();
foreach (var child in menu.Children)
{
GenerateChildren(child);
}
}
Update
See example 5 on this page.
I would recommend generating the jQuery code by server, so it's easier for you to control both the menus and the jQ generated menus.
Is it possible to have Wordpress generate this type of unordered list?
<ul id="nav1">
<li>item1</li>
<li>item2
<ul id="nav2">
<li>subitem1</li>
</ul></li>
<li>item3</li>
</ul>
Obviously I can do the following:
<ul id="nav1">
<?php wp_list_pages(); ?>
</ul>
But my question is, how do I make it so that I can have a secondary ul under a page (or list item such as 'item2' above)?
Basically, I'm looking for a way for Wordpress to dynamically generate the following:
<li>item2
<ul>
<li>subitem1</li>
</ul></li>
And I can use JQuery if necessary to give the secondary (sub menu) unordered list an id of #nav2...
Anyway, is this possible?
Thanks and I appreciate all of your help!
Amit
Nevermind guys.
I just tried it with the wp_list_page(); function and it works. It does exactly as I wanted it to with exception to one thing...
It put's an extra <ul> in there so the list looks something like this:
<ul id="nav1">
Pages
<ul>
<li>item1
<ul class="children">
<li>sub-item1</li>
</ul></li>
</ul>
</ul>
Anyone know how to get rid of the <ul> following the Pages title, as well as NOT show the word Pages?
Thanks, Amit
Okay, I solved the added ul program.
This is what I have as the result:
<ul id="nav1"><?php
$pageargs = array(
'link_after' => ' /',
'title_li' => __('')
);
wp_list_pages($pageargs); ?></ul>
Hope someone benefits from it :)
Amit