I am using dojo and I want to get a node that has a not immediate child, and this child has an specific id. How can I do this using dojo.query? I want to get this node to hide it.
For reference Look here.
Assuming this HTML:
<div id="myDiv"><span>HIDE ME</span> some other text</div>
Here's the query syntax:
All elements that are immediate children of node with id="myDiv"
dojo.query('#myDiv > span')
dojo.query('#myDiv > span').forEach(function(node, index, arr){
node.style("display", "none");
});
I solved it using dojo.isDescendant. If ancestor tag has a className "class" and descendant has an Id "Id":
des = dojo.byId("Id");
dojo.query(". 'class'").forEach(function(node) {
if(dojo.isDescendant(des, node) {
//something
}});
Related
I've created a riot tag which renders many svg elements in loop
<circle ref={ keyName } each={ point,keyName in opts.points } ></circle>
Now I've two conditions
Update a particular tag
Update all the tags
To update properties of a particular tag, I' m using this.refs[ someName ].setAttributes("cx", 30);
To update properties of all the tags should I use the above approach in loop? or I should update opts.points and call this.update().
You only need to update your list opts.points and riot.js will change the html without you refer to each item using jQuery as you commented.
Check if the opts.lists are updating, this probably is your problem, but you can solve this doing something like:
<circle ref={ keyName } each={ point,keyName in this.points } ></circle>
<script>
this.points = opts.points // the parent component is providing a list
someFunction() {
this.points = ["something", "whatever", "another thing"]
this.update()
}
</script>
I have this html element:
Link text
I want to add data-tooltip and title attributes dynamically by condition:
Link text
Is there any way in VueJS to add multiple dynamic attributes at same time:
<!-- instead of this: -->
Link text
<!-- something like this: -->
<a href="javascript:" ...tooltipAttributes >Link text</a>
You could take advantage of v-bind on the DOM element you wish to apply multiple attributes to based on some dynamically changing condition.
Here's a Plunker example demonstrating how you might go about it.
Take note of the object returned:
computed: {
multiAttrs() {
return this.showAttrs ? {
'data-toggle': 'tooltip',
title: 'Some tooltip text',
} : null;
}
}
You should be able to use v-bind="tooltipAttributes"
the docs here https://v2.vuejs.org/v2/api/#v-bind have more info, but the key part is under usage
Dynamically bind one or more attributes, or a component prop to an expression.
From the Docs:
1. You can dynamically bind multiple attributes/props to a single element by using v-bind:
(no colon, no extra attribute, just v-bind)
<a href="#" v-bind="tooltipAttributes" >Link text</a>
2. And then declare the variable in the computed section:
(you can also declare it in the data section, but that would require manual direct value changes)
computed() {
return {
tooltipAttributes: {
title: 'Title',
'data-toggle': this.toggle === true && !disabled
}
}
}
Note: Attributes with dashes/hyphens - in them (e.g. data-toggle) need to be a string because Javascript doesn't recognize - as a valid symbol in variable naming.
This is THE SAME AS:
<a href="#" title="Title" :data-toggle="this.toggle === true && !disabled" >Link text</a>
Is it possible to know if a parent contains child with specific class name.
Sample code
<div id="parent_tag">
<div id="div1">
<span>Title 1</span>
</div>
<div id="div2">
<b>Title 2</b>
</div>
<div id="div3">
<span>Title 3</span>
</div>
</div>
I trying to access "span tag" only with Title 3. I know I can do it by specifying id. but what if I want to it generically (i.e for all elements). So my first approach should be "I will look for span tag inside div". but I don't know how to do that? Please help.
Try XPath:
//div/span[text()="Title 3"]
Using jquery selectors to select span in div3:
$("#div3 span")
Or specifically the first span element inside div3:
$("#div3 span:first")
Here's the idea to get what you need
// Get Parent Element
WebElement parent = driver.findElement(By
.xpath("//div[#id='parent_tag']"));
// Get All children elements of the parent element
List<WebElement> children = parent.findElements(By.xpath("//*"));
// Init some based param for next usage
boolean checkClass = false;
String expectedClass = "Expected_Class";
// Fetch each child element and check whether its text contains expected string.
for (WebElement child : children) {
if (child.getAttribute("class").contains(expectedClass)) {
checkClass = true;
}
}
if (checkClass) {
System.out
.println("We have at least one child has expected class: "
+ expectedClass);
}
else System.out.println("We don't have any child has expected class: "
+ expectedClass);
if you want to check the text, we could do
if (child.getText().contains(expectedText)) {
checkResult = true;
}
}
Hope it helps.
HTML
<div id="outer-container" class="container">
<div id="inner-container" class="container">
<div id="some-node"></div>
</div>
</div>
JS
require(["dojo/query", "dojo/NodeList-traverse"], function(query){
console.log(query("#some-node").parents('.container'));
});
This will log an array with two DOM nodes - the one with the id "outer-container", and the one with the id "inner-container".
What I want to know is, is there a way to know in what order will parent nodes appear in the array returned? My testing showed that there isn't, but that doesn't make sense, the method goes through the DOM structure either upwards or downwards, right?
I tested your code in JSFiddle and always got the same result:
[div#inner-container.container, div#outer-container.container]
If you really want to know what happens, check the "dojo/Nodelist-traverse" class in the Dojo source.
This is what the "parents()" method does:
parents: function(/*String?*/ query){
return this._getRelatedUniqueNodes(query, function(node, ary){
var pary = [];
while(node.parentNode){
node = node.parentNode;
pary.push(node);
}
return pary;
}); // dojo/NodeList
}
I haven't gone through the "_getRelatedUniqueNodes" method, but it seems that the "closest" parent is added to the list first, following it's parent .... and so on. This is exactly what happened in my JSFiddle.
The HTML snippet:
<div class="hide_on_start">
<label>Type of Visit</label>
<div id="record_visit_type"></div>
</div>
<div class="hide_on_start">
<label>Visit Date</label>
<div id="record_visit_date"></div>
</div>
<div class="hide_on_start">
<label>Staff</label>
<div id="record_staff"></div>
</div>
The javascript I am using:
>>> dojo.byId('record_visit_type')
<div id="record_visit_type">
>>> dojo.byId('record_visit_type').parent().removeClass('hide_on_start')
TypeError: dojo.byId("record_visit_type").parent is not a function
I don't understand what the issue is with dojo.byId('record_visit_type').parent().removeClass('hide_on_start'). Can somebody explain?
Thanks
It looks like you're using dojo.byId as if it returns a dojo.NodeList, but it doesn't - it just returns a DOM node. Only dojo.query regularly returns dojo.NodeList objects.
dojo.NodeList objects have a removeClass function (which operates on all nodes in the list), and if you dojo.require("dojo.NodeList-traverse"), they also have a parent() function which returns a new NodeList containing the immediate parents of respective nodes in the original list.
http://dojotoolkit.org/reference-guide/dojo/NodeList-traverse.html
Theres a couple of problems I see with your code:
I think what you are looking for is the parentNode property of the domNode you are retrieving. This is not a method, but a property of the domNode you are looking up via dojo.byId.
Also, domNodes themselves to not have a removeClass method. You probably want to use dojo's dojo.removeClass(domNOde, cssClass) method to do this.
var recordVisitTypeDomNode = dojo.byId('record_visit_type');
dojo.removeClass(recordVisitTypeDomNode.parentNode, 'hide_on_start');
parentNode is right but here is how you do it in dojo:
// Go from the DOM node to a NodeList
var myDomNode = dojo.byId('record_visit_type');
var myNodeList = dojo.query(myDomNode);
// Get the parent
dojo.require("dojo.NodeList-traverse");
var parent = myNodeList.parent()[0];
This method of calling dojo.query is valid:
// Non-selector Queries:
// ---------------------
//
// If something other than a String is passed for the query,
// `dojo.query` will return a new `dojo.NodeList` instance
// constructed from that parameter alone and all further
// processing will stop. This means that if you have a reference
// to a node or NodeList, you can quickly construct a new NodeList
// from the original by calling `dojo.query(node)` or
// `dojo.query(list)`.
http://jsapi.info/dojo/1/dojo.query
It is like jquery $(myDomNode).parent().