Here is the code:
dojo.query(subNav.navClass).forEach(function(node, index, arr){
if(dojo.style(node, 'display') == 'block'){
"NOW HOW WOULD I FIND CHILDREN????"
});
}
});
By the way I just started working with DOJO, i am primarily working in jQuery.
So now that i have found node that has its display set to block, i want to preform something to its specific children, how would i preform query on children of the node that i just stopped on?
any clarification, suggestion? thank you.
dojo.query('> li .secondary_nav_dropdown', node).style('display', 'none');
The second parameter specifies origin where the query should start from.
Dojo query documentation
U can use array children and mapping like this:
dojo.map(node.children, function(child){
// work with child
})
Related
I'm a new developer and I am trying to build a certain test using cypress. the client has a dynamic grid, and I'd like to see which row in the grid contains the data I want. I cannot change the HTML file.
At the moment I am trying to iterate over all rows using each() cypress command. So I have two questions:
is this a correct approach?
assuming it is correct, how do I get the value out of the component? for example, how do I get the value of "aaaaaaaa" out of here (and into a variable):
html structure
thanks!
Using each is a pretty good approach, select the rows and make use of the index parameter to find which one.
cy.get('[role="row"]').each(($row, index) => {
if ($row.find('span').text() === 'aaaa') {
cy.wrap(index).as('rowIndex')
})
cy.get('#rowIndex')
.then(rowIndex => {
// use the row index here
})
There's also this method Cypress get index of th element to use it later.
If it works (the jQuery docs don't show this usage) the code for your HTML would be
cy.contains('[role="row"]', 'aaaa').invoke('index').as('rowIndex')
cy.get('#rowIndex')
.then(rowIndex => {
// use the row index here
})
There are a number of approaches you can take, but I think my preferred one is to store the variable in Cypress environment variable. In the following, I get the element, then use a .then() statement to get the text of the element (with the JQuery function, .text()), and store it in a Cypress environment variable (via Cypress.env()).
describe('tests', () => {
it('test', () => {
cy.get('some-element').then(($el) => {
Cypress.env('myVar', $el.text());
})
... // some code
// When needing the variable, reference it by Cypress.env('myVar');
});
afterEach(() => {
// after each test, clear the variable
Cypress.env('myVar', null)
});
});
I have a test doing the same thing and the way I've approached it was:
cy.contains('aaaa').invoke("text").as('variableName')
This can now be used like this:
cy.get(this.variableName).should('be.visible')
cy.contains('aaaa').parent().next().children() //Used to iterate through rows.
I have a fairly simple question maybe, but I can't find an answer to it. I also searched previous questions but it seems not to work....
I have on my template in angular a large amount of text inside a div and some parts are wrapped with a span and those have the class highlight. Now I simply want to select them all when I press on a button. I need all the spans and do sth with them later.
I tried:
const elm = (this.el as any).getElementsByClassName('.highlight');
console.log('elmens: ', elm);
for (let i = 0; i < elm.length; i++) {
console.log('HTML ELM: ', elm[i]);
}
Also with:
const elm = document.getElementsByClassName('.highlight');
This both only returns me an empty selection, although they are existent. I even tried it on the browser console. I know I could use jQuery maybe, but I don't want to include it for such simple tasks.
Maybe you know what I am doing wrong???
I am using:
Angular: 7.0.0
Angular-cli: 7.0.2
Typescript: 3.1.3
I would look to avoid using this technique within the angular framework as it is not recommended to interact with the DOM in this way. They have appropriate alternatives. Interacting with the DOM can introduce Performance implications and is bad practice.
Instead you could look into using #viewchildren for this problem.
Docs here
Which would suggest each element you want to get, in your case the spans
<span #myNewId>text</span>
<span #myNewId>text snippet 2</span>
Could be accessed in the controller with the following
#ViewChildren('myNewId')public mySpans: ElementRef;
This should give you all the same functionality without having to interact directly with the DOM. mySpans will then be an array of the spans marked with the #myNewID.
This should also allow you access your elements in regards to your question, as they are bound the variables in the class.
I would use:
const elements= (<HTMLCollection>document.getElementsByClassName('your_class_name_without_dot'));
console.log(elements)
Maybe your child views are not initialized and you try to play with DOM before elements are rendered to the browser. try to use Angular hooks and then call you code. Like
ngAfterViewChecked() {
...
const elm = (this.el as any).getElementsByClassName('.highlight');
console.log('elmens: ', elm);
for (let i = 0; i < elm.length; i++) {
console.log('HTML ELM: ', elm[i]);
}
...
}
I have an application in Extjs and I need to select a specific node to expand the tree.
I am using the following method:
var record = tree.getRootNode().FindChild('text', 'employee', true);
tree.getSelectionModel().select(record);
in this way does not work, but if I select any one node and then run the above method, it works without problems.
Help please
UPDATE
CODE:
tree.expandPath(route, "text", "->", function() {
var record = tree.getRootNode().findChild('text','BASE',true);
tree.getSelectionModel().select(record);
});
It is possible that the node is not loaded yet. If you need to expand the tree, the best way is to use expandPath method and if you need to select the node then do it in expandPath callback.
When do you try to select the node with this code? While the tree panel got generated? In this case, perhaps some code from treepanels implementation will reset the selection. So for testing try it with a lock on the the selectionModel:
var record = tree.getRootNode().findChild('text','BASE',true);
tree.getSelectionModel().select(record);
tree.getSelectionModel().setLocked(true);
(If you know already the node which should be expanded while loading data for the store, you can also set "expanded" to true in the data for this specific record/node. Then the expansion is done by ExtJS automatically.)
Friends thanks for your help, I was able to solve my problem.
Apparently I did not select the node because it had not shown the window and the nodes were not available, so here add a listener after render.
so I stay my code:
listeners: {
afterrender : function(){
this.selectPath(this.ruta, 'text', '->', function (s,n) {
var nodeEl = Ext.get(this.view.getNode(n));
nodeEl.scrollIntoView(this.view.el, false, true);
});
}
}
this solution apart from selecting me too the node moves to its location in the tree.
hopefully serve them.
Greetings!
I got a method into my masterpage which populates a value to every label I pass:
function FillLabel(field, text)
{
$(field).html(text);
}
I'll need to make it adaptable to the situation that my field receive an html input and to put the text inside this input I need to use $(field).html(text);
I need to build an if to identify the type of the field and I have no idea how to do that. How can I do this?
You don't give enough details ! According to your code snippet, you seem to talk about JavaScript based on jQuery.
You can test the type of an element with the is() method and selectors :
var element=$(field);
if(element.is(":input")) element.val(text);
else element.html(text);
You can check the tag name:
var tag = $(field).attr('tagName');
edit — #Cédric Belin correctly suggests ".is()":
var isInput = $(field).is(':input');
Much more jQuery-like.
Or check to see if there's a "value" property:
if ('value' in $(field)[0]) { ... }
So, overall:
function FillLabel(field, text) {
var $field = $(field);
if ('value' in $field[0])
$field.val(text);
else
$field.html(text);
}
You might consider using ".text()" instead of ".html()" but I don't know what your application needs are. You also might consider writing this as a jQuery plugin.
I'm trying to change a class by first discovering if it is the parent object to a particular image using Mootools (clients previous web developer seemed to have it in for me). I can't seem to find much good documentation on the subject.
<div class="textwidget">
<img src="share.jpg">
</div>
So far I've managed to locate all the divs with the class 'textwidget' using:
var obs = $$('.textwidget');
Now I need to cycle through them and discover which hosts a child node with the src listed above...
for(var i=0;i<obs.length;i++){
if(obs[i].childnode.src == 'share.jpg'){ // <-- non mootools syntax
obs[i].class = 'new class'; // <-- non mootools syntax.
}
}
i'd like to run a loop like this, but in mootools speak of course. Anyone familiar with the correct syntax?
Thanks
-J
I think what you want is something like:
for(var i=0;i<obs.length;i++){
if(obs[i].getChildren()[0].getProperty('src') == 'share.jpg'){ // <-- mootools syntax
obs[i].setProperty('class','new class'); // <-- mootools syntax.
}
}
You can find more details here:
http://mootools.net/docs/core/Element/Element
you could do something like this via a selector / parent combo:
document.getElements("div.textwidget img[src=share.jpg]").getParent("div.textwidget");
http://www.jsfiddle.net/MBc37/4/
or you can be more thorough / longwinded...
// css selector, divs array filtered by existance of a child img
results.mixedFilter = document.getElements("div.textwidget").filter(function(el) {
return el.getElement("img[src=share.jpg]");
});
// checking vs img src properties of all child imgs
results.longwinded = [];
document.getElements("div.textwidget").each(function(el) {
var imgs = el.getElements("img");
if (!imgs.length) return;
if (imgs.some(function(im) {
return im.get("src") == "share.jpg";
})) results.longwinded.push(el);
});
What you want to do here is filter the array of elements like this:
$$('.text-widget').filter(function(e) {
var child_img = e.getFirst('img');
return $defined(child_img) && child_img.get('src') == 'share.jpg'
});
If the function passed to 'filter' returns true the item gets included.
You could also use selectors as one of the other answers mentioned. Although there might be performance issues with using them in that way?
Is this what you are looking for:
$$('img[src=share.jpg]').getParent().set('class', 'newClass');