xquery: select ancestor several levels up from parent - xquery

I am trying to select the value of the <li> ancestor node just previous to the parent node. Here is a sample of the document, im-trg.xml:
<trg>
<category>
<h2>Accounting and Auditing</h2>
<ul>
<li>Laws and Regulations
<ul>
<li>Regulation S-X</li>
</ul>
</li>
<li>Staff Guidance
<ul>
<li>No Action Letters
<ul>
<li>Robert Van Grover, Esq., Seward and Kissel LLP (November 5, 2013)</li>
</ul>
</li>
</ul>
</li>
</ul>
</category>
</trg>
Here is my query:
for $x in doc("C:\im-trg.xml")//li/a
return
<item>
<title>{data($x)}</title>
<documentType>{data($x/ancestor::li[2])}</documentType>
<category>{data($x/ancestor::category/h2)}</category>
</item>
I am getting:
<item>
<title>Regulation S-X</title>
<documentType>Laws and RegulationsRegulation S-X</documentType>
<category>Accounting and Auditing</category>
</item>
For <documentType>, I want to select only the ancestor <li> immediately previous to the <li> parent of the <a>, which indicates the type of document, so I want:
<item>
<title>Regulation S-X</title>
<documentType>Laws and Regulations</documentType>
<category>Accounting and Auditing</category>
</item>
and
<item>
<title>Robert Van Grover, Esq., Seward and Kissel LLP</title>
<documentType>No Action Letters</documentType>
<category>Accounting and Auditing</category>
</item>
I don't think I can come down from the root because the parent <li> is sometimes double nested and sometimes triple nested.

Text value of an element is the concatenation of all its text-node descendants. If you only want the text immediately contained by the element, you should explicitly select its text children, eg
data($x/ancestor::li[2]/text())

Related

Is there a way to have multiple router-links inside a li and that li gets the active class in vue2?

Is there a way to have multiple router-links inside a li and that li gets the active class in vue2?
I was thinking in something like this: https://jsfiddle.net/tejitak/o44z47ag/5/
<div id="app">
<ul>
<li>
<ul v-link-active>
<li>
<a v-link="{ path: '/foo' }">Go to Foo</a>
</li>
<li>
<a v-link="{ path: '/bar' }">Go to Bar</a>
</li>
</ul>
</li>
<li>
<a v-link="{ path: '/baz' }">Go to Baz</a>
</li>
</ul>
<router-view></router-view>
</div>
It's supposed to be used in a menu which as submenus.
The migration docs only references a single link so I don't know if this is possible: https://v2.vuejs.org/v2/guide/migration-vue-router.html#v-link-active-replaced
You can use router-link like this to do that:
<ul>
<router-link tag="li" to="/foo">
<span>
<strong>
<a>/foo</a>
</strong>
</span>
</router-link>
</ul>
Here's the documentation for vue-router: http://router.vuejs.org/en/
Here's the documentation for router-link: http://router.vuejs.org/en/api/router-link.html
Here's a demo for nested router-links: https://jsfiddle.net/wx17jh2y/
<ul>
<router-link tag="li" to="/foo">
<span><a>Foo</a></span>
<ul>
<router-link tag="li" to="/bar">
<span><a>bar</a></span>
</router-link>
</ul>
</router-link>
</ul>
If you want to group multiple links underneath one element that should be considered active (e.g. using Bootstrap dropdowns), you can just make the parent element a router-link as well and prevent any interaction by setting the event attribute to an empty list. Example:
<router-link tag="li" to="/function" :event="[]">
<ul>
<router-link tag="li" to="/function/a"><a>Function A</a></router-link>
<router-link tag="li" to="/function/b"><a>Function B</a></router-link>
</ul>
</router-link>
See also the documentation on the event property on router-link.
I would not use router-link and instead bind to the href attribute on the anchor tags. If the links in the menu are static, then you may not even need to bind to the href attribute - just specify href="/foo" (at least that's how it worked in angular1). If the href needs to be generated, like if you're looping through menu items, then create the hrefs in a vue instance function and call it like :href="createHref(menuItem)" for example.
To assign the active class, I would assign the class if the href matches the current route (see https://v2.vuejs.org/v2/guide/class-and-style.html). The current route is in this.$route. Just make sure route is passed into the root app instance: https://router.vuejs.org/en/api/component-injections.html

access parent sub array key handlbars

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>

Meteor's Blaze keeps re-using first list element's attributes

Using Meteor 1.2.02
I create a list with a helper:
<ul>
{{#each movie}}
<li id="{{_id}}">{{name}}</li>
{{/each}}
</ul>
The result:
<li id="1">Interstellar</i>
<li id="2">The Martian</i>
Then I hide Interstellar:
$("#1").hide();
Result:
<li id="1" style="display:none">Interstellar</li>
<li id="2">The Martian</li>
Then I remove Interstellar from the collection Movies.remove({name: "Interstellar"}) and this is what I end up with after Blaze reactively updates the DOM:
<li id="2" style="display:none">The Martian</li>
Does anyone know why now "The Martian" is inside the list element with display:none that belonged to Interstellar? I thought Blaze would have removed that first <li> elements and all its attributes. Thank you.

generating references to <li>

I have an XML file that I transform with XSLT 2.0 into xhtml. The file has a line like this:
<p>Here I refer to list item number (<lat:listref href="nr"/>) below to tell you about.....</p>
and elsewhere, nested in other elements in that same file a numbered (in CSS) list:
<ol>
<li>list item 1</i>
<li>list item 2</i>
<li><span id="nr">list</span> item 3</i>
</ol>
<lat:listref href="nr"/> must be transformed into the number 3.
So far I came up with:
<xsl:template match="lat:listref">
<xsl:variable name="l" select="#href"/>
<xsl:number select="//li[*//#id=$l]" level="single"/>
</xsl:template>
Can I do this without the need of a variable?
Define a key: <xsl:key name="k1" match="ol/li/span[#id]" use="#id"/>.
Then in your template for the lat:listref simply do <xsl:apply-templates select="key('k1', #href)/parent::li" mode="m1"/>.
Finally write a template: <xsl:template match="ol/li" mode="m1"><xsl:number/></xsl:template>
Yes. Use current() as defined by the XSLT 2.0 specification:
<xsl:template match="lat:listref">
<xsl:value-of select="count(//li[.//#id = current()/#href]/preceding-sibling::li) + 1"/>
</xsl:template>

Indentation of li items in ng-repeat

I am using ng-repeat to show list items with some text. And I want every single item to be indented 10-20px to the right from the previous one. I don't have much experience with css.
<li ng-repeat="todo in todos"
ng-class="{'selectedToDo': (todo.id == selectedToDo)}">
{{todo.toDoText}}
</li>
Here is a jsFiddle with my code.
Thanks in advance!
you may use ng-style to solve your problem:
<li ng-repeat="todo in todos"
ng-class="{'selectedToDo': (todo.id == selectedToDo)}"
ng-style="{'margin-left': 10*$index+'px'}">
{{todo.toDoText}}
</li>
$index is a varibale that will be set by ng-repeat. You may use this to calculate your style.
Change your template with following::
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="todo in todos"
ng-class="{'selectedToDo': (todo.id == selectedToDo)}" style="text-indent: {{$index * 10}}px">
{{todo.toDoText}}
</li>
</ul>
</div>

Resources