<div class="company-list-title"> … </div>
<ul id="company-list1" class="company-list">
<li class="company-list-item"> … </li>
<li class="company-list-item"> … </li>
<li class="company-list-item"> … </li>
<li class="company-list-item">
<a class="company_link" href="javascript: applyswitch('1006084861', '1006084864')">
E2E C2 Harmony US Plus_US_QBP-T39_1_201309161379373407264 (cluster 2: company 1006084861)
</a>
How to click on hyperlink with text "E2E C2 Harmony US Plus_US_QBP-T39_1_201309161379373407264 (cluster 2: company 1006084861)" using CasperJS?
Following code does not work:
casper.then(function() {
this.test.assertExists({
type: 'xpath',
path: '//ul[#class="company-list"]'
}, "Got Here 1");
this.test.assertExists({
type: 'xpath',
path: '//ul[#class="company-list"]//a[text()="E2E C2 Harmony US Plus_US_QBP- T39_1_201309161379373407264 (cluster 2: company 1006084861)"]'
}, "Got Here 2");
this.click(('//ul[#class="company-list"]//a[text()="E2E C2 Harmony US Plus_US_QBP- T39_1_201309161379373407264 (cluster 2: company 1006084861)"]'), function() {
console.log("Woop!");
});
});
You can try to use clickLabel():
this.clickLabel('E2E C2 Harmony US Plus_US_QBP-T39_1_201309161379373407264 (cluster 2: company 1006084861)', 'a');
Related
I wanted to make it like this:
<ul>
<li class="aaa active">text-aaa</li>
<li class="bbb">text-bbb</li>
<li class="ccc">text-ccc</li>
</ul>
Here's the code. https://jsfiddle.net/qwvwsgb9/
I can bind value calculated by v-for by using non-object format :class="v.name"
<div id="app">
<ul>
<li v-for="v, i in listAry" :class="{v.name:true,active:active==i}">{{ v.text }}</li>
</ul>
</div>
script:
let vm = new Vue({
el: "#app",
data: {
active:0,
listAry: [{
name: 'aaa',
text: 'text-aaa'
}, {
name: 'bbb',
text: 'text-bbb'
}, {
name: 'ccc',
text: 'text-ccc'
}]
}
})
but as long as I tried to apply it in object format, the error occurs.
How can I do it?
Try something like this :class="[{ active: active === i }, v.name]"
<div id="app">
<ul>
<li v-for="v, i in listAry" :class="[{ active: active === i }, v.name]">
{{ v.text }}
</li>
</ul>
</div>
Here is my data
data = [
{ category : "Cat1"},
{ category : "Cat2"},
{ category : "Cat3"},
{ category : "Cat4"},
{ category : "Cat5"},
{ category : "Cat6"}]
Let suppose i have it in a collection named myData
What i want is to group and display my data in group of 2.
Then i display it in a navbar (in a dropdown in fact) like this
<ul>
{{#each group}}
<li class="col-md-2">
<ul>
{{#each categories}}
<li>{{category}}</li>
{{/each}}
</ul>
{{/each}}
<ul>
What i am asking is how to group the data in my helpers or in mongodb so that i could get this result.
I'm not 100% clear what you mean by "group", but assuming you are using Boostrap navbar dropdowns, you could group them with separators:
{{#each categories}}
<li>{{category}}</li>
{{#if doSeparator #index}}
<li role="separator" class="divider"></li>
{{/if}
{{/each}}
and the doSeparator helper goes in your .js file:
doSeparator( index ) {
return (index % 2);
}
If on the other hand you want submenus for each group you will need to reorganize your array in two levels.
Another approach could be:
<ul>
{{#each groups}}
<li>
<ul>
{{#each this}}
<li>{{category}}</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
Then in your Template helper:
import { Template } from 'meteor/templating';
import chunk from 'lodash/chunk';
import { myData } from '/imports/api/mydata/collection';
import './main.html';
Template.someTemplate.helpers({
groups() {
return chunk(myData.find().fetch(), 2);
},
});
This uses lodash's chunk function to split the returned array into groupings of 2 items (so you'll want to meteor npm install --save lodash if you haven't already).
The above will give you output like:
<ul>
<li>
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>
<ul>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>
<ul>
<li>5</li>
<li>6</li>
</ul>
</li>
</ul>
You can break it up into groups of 2 inside a helper using underscore's map and compact
Template.hello.helpers({
groups() {
// var data = myData.find().fetch();
var data = [
{ category : "Cat1"},
{ category : "Cat2"},
{ category : "Cat3"},
{ category : "Cat4"},
{ category : "Cat5"},
{ category : "Cat6"}];
return _.chain(data).map(function(item, index){
return (index % 2) ? false : data.slice(index, index + 2);
}).compact().value();
},
});
Then, in your template you can use a nested #each in to loop through groups
<template name="hello">
<ul>
{{#each group in groups}}
<li class="col-md-2">
<ul>
{{#each category in group}}
<li>{{category.category}}</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</template>
Is there any example how to write test case in vue? The click event not working.
The template in App.vue
<template>
<div class="main">
<textarea v-model="input" id="input" rows="3" placeholder="Please entry colors, eg: '#000','#fff' or ['#000', '#fff']"></textarea>
<button type="button" class="btn btn-primary parse" #click="parse">Go!</button>
<ul>
<li v-for="color in colors">
<span v-bind:style="{ background: color}"></span>
{{color}}
<li>
</ul>
karma test
describe('App.vue', () => {
it('should render correct color', () => {
const vm = new Vue({
template: "<div><app></app></div>",
components: {
App
}
}).$mount()
console.log(vm.$el)
vm.input = '#333, #444'
vm.$el.querySelector('.btn').click()
expect(vm.$el.querySelector('ul li:eq(0) span').style.background).toBe('#333')
})
})
And I have output the vm.$el, it shows like below, missing the v-model and #click
Does it give you any error? Are you using PhantomJS as browser?
I don't think click is supported on PhantomJS
See here PhantomJS; click an element
I am new in TYPO3, I would like to know if it is possible to transform (using typoscript) the following structure of html-css menu in TYPO3 Hmenu. It is a multilevel structure with html lists.
<ul class="nav navbar-nav">
<!-- Home -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Home
</a>
<ul class="dropdown-menu">
<li>Option 1: Default Page</li>
<!-- One Page -->
<li class="dropdown-submenu">
Option 2: One Page
<ul class="dropdown-menu">
<li><a target="_blank" href="One-Pages/Classic/index.html">- One Page Template</a></li>
<li><a target="_blank" href="One-Pages/Classic/one_page_dark.html">- One Page Dark Option</a></li>
</ul>
</li>
<!-- End One Page -->
</ul>
</li>
<!-- End Home -->
<!-- Pages -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Pages
</a>
<ul class="dropdown-menu">
<!-- About Pages -->
<li class="dropdown-submenu">
About Pages
<ul class="dropdown-menu">
<li>About Us </li>
<li>About Us 1</li>
</ul>
</li>
<!-- End About Pages -->
<!-- Service Pages -->
<li class="dropdown-submenu">
Service Pages
<ul class="dropdown-menu">
<li>Our Services</li>
</ul>
</li>
<!-- End Service Pages -->
</ul>
</li>
<!-- End Pages -->
</ul>
It is possible, please read the very detailed manual here.
lib.textmenu = HMENU lib.textmenu {
# We define the first level as text menu.
1 = TMENU
# We define the normal state ("NO").
1.NO = 1
1.NO.allWrap = <li>|</li>
# We define the active state ("ACT").
1.ACT = 1
1.ACT.wrapItemAndSub = <li>|</li>
# Wrap the whole first level.
1.wrap = <ul class="level1">|</ul>
# The second and third level should be configured exactly
# the same way.
# In between the curly brackets, objects can be copied.
# With the dot "." we define that the object can be found
# in the brackets.
# With 2.wrap and 3.wrap we overwrite the wrap, which was
# copied from 1.wrap.
2 < .1
2.wrap = <ul class="level2">|</ul>
3 < .1
3.wrap = <ul class="level3">|</ul>
}
If you already know TypoScript, then here are the references: HMENU, TMENU, TMENUITEM
I have this piece of HTML
<div id="fileTreeInviati">
<ul class="php-file-tree">
<li class="pft-directory">
A006 - SOMETEXT (<span name="contaNew"></span>)
<img src="./moduli/home/images/info.png" title="Informazioni Azienda" class="imgInfo"/>
<ul style="display: none;">
<li class="pft-file ext-png">
cut.png
</li>
<li class="pft-file ext-dll">
Safari.dll
</li>
</ul>
</li>
<li class="pft-directory">
A012 - SOMETEXT (<span name="contaNew"></span>)
<img src="./moduli/home/images/info.png" title="Informazioni Azienda" class="imgInfo"/>
<ul style="display: none;">
<li class="pft-file ext-jpg">
04.jpg
</li>
<li class="pft-file ext-dll">
Safari.dll
</li>
</ul>
</li>
<li class="pft-directory">
A014 - SOMETEXT (<span name="contaNew"></span>)
<img src="./moduli/home/images/info.png" title="Informazioni Azienda" class="imgInfo"/>
<ul style="display: none;">
<li class="pft-file ext-txt">
acu.txt
</li>
<li class="pft-file ext-dll">
Safari.dll
</li>
</ul>
</li>
</ul>
I'm working on a js snippet that cycle through all "a" of the "li" and checks if it has the class "new" if yes increment a counter by one. This counter now has to be printed on the relative "li" "span" 3 level before.
So I have the number of the element with the "new" class.
The js snippet is this
$("#fileTreeInviati .php-file-tree .pft-directory li").each(function(){
$(this).children("a").each(function(i,e){
if ($(e).hasClass("new")){
cont++;
console.log($(e).text());
$(this).parent().parent().parent().children("a").children("span").text(cont);
}
})
cont = 0;
});
I think I'm almost there but the counter is always 1. I think there is something mess with .children, maybe it can handle only the first occurrence?
Thanks for help
Why not just use .length instead?
$('#fileTreeInviati .php-file-tree .pft-directory li a.new').length;
Update: If you want to count every li element separately, use this:
$('#fileTreeInviati .php-file-tree .pft-directory li').each(function() {
alert($('a.new', this).length);
})
OK, I figure out how to do the magic:)
Here it is:
cont = 0;
$('#fileTreeInviati .php-file-tree .pft-directory').each(function() {
$(this).children("ul").children("li").children("a.new").each(function(i,e){
cont++;
$(e).parent().parent().parent().children("a").children("span").text(cont);
});
cont=0;
});
Now all works perfect. If you think this can do in a better way, lemme know.
Bye