Sample HTML Element
<div data-testid="Custom Data Test">
The above div does not have a class inside.
How do I access, "data-testid" (which selector should I use)
You can use querySelector() or querySelectorAll() and select by attribute like this:
const div = document.querySelector('div[data-testid="Custom Data Test"]');
div.textContent = "blah";
const divs = document.querySelectorAll('div[data-testid]');
divs.forEach( (e,i) => e.textContent = e.textContent + " this is div number " + i + " and data-testid attribute is " + e.dataset.testid);
Sample HTML Element
<div data-testid="Custom Data Test"></div>
<div data-testid="Custom Data Test 2"></div>
<div data-testid="Custom Data Test 3"></div>
Related
I have a page where several status can be found. I would like to count all serviceStatus-OK and serviceStatus-DOWN divs on the page. Unfortunately I cannot modify the page, I need to verify all service is up and running. My idea is that, load the page, count all OK status. If 5 service has 5 OK, we are good. If there is any DOWN, we are not ok.
Any ideas?
Source code:
<span id="content">
<div class="status">
<div class="serviceName">
Some name <br />
http://blablaservice1
</div>
<div class="serviceStatus-OK">
OK
</div>
</div>
<div class="status">
<div class="serviceName">
Some other name <br />
http://blablaservice2
</div>
<div class="serviceStatus-DOWN">
DOWN
</div>
</div>
My code:
Elements services = doc.select("span#conent");
Element content = doc.getElementById("content");
Elements servicesOks = content.getElementsByTag("status");
int upCounter = 0;
int downCounter = 0;
for (Element y : servicesOks) {
if (y.hasClass("status-OK")) {
upCounter++;
}
}
for (Element y : servicesOks) {
if (y.hasAttr("status-DOWN")) {
downCounter++;
}
}
System.out.println("OK Systems: " + upCounter);
System.out.println("DOWN Systems: " + upCounter);
My output is:
OK Systems: 0
DOWN Systems: 0
You can find the number of okays and downs like this:
Document doc = Jsoup.parse(input);
Elements OK = doc.select(".serviceStatus-OK");
Elements down = doc.select(".serviceStatus-DOWN");
System.out.println("OK - " + OK.size());
System.out.println("DOWN - " + down.size());
Find all the elements with the names serviceStatus-OK and serviceStatus-DOWN, and then count the number of items of each kind (elemnts is just a list).
I have a simple directive that replaces the directive tag with some template HTML. The HTML includes a <div> with a Bootstrap class of "clearfix" (i.e., <div class="clearfix">). When the <div> is part of the template HTML everything works fine; however, when the <div> surrounds the directive tag the template HTML is not rendered.
THIS WORKS:
<div class="panel-body">
<pr-details pr="selectedPr"></pr-details>
<!-- Additional unaffected content -->
</div>
return {
restrict: 'E',
replace: 'true',
scope: {pr: '=' },
template:
"<div class='clearfix'>\n" +
" <div class='pull-right'>\n" +
" <!-- floated content -->\n" +
" </div>\n" +
" <div>\n" +
" <!-- non-floated content -->\n" +
" </div>\n" +
"</div>\n"
};
THIS DOESN"T WORK:
<div class="panel-body">
<div class="clearfix">
<pr-details pr="selectedPr"></pr-details>
</div>
<!-- Additional unaffected content -->
</div>
return {
restrict: 'E',
replace: 'true',
scope: {pr: '=' },
template:
"<div class='pull-right'>\n" +
" <!-- floated content -->\n" +
"</div>\n" +
"<div>\n" +
" <!-- non-floated content -->\n" +
"</div>\n" +
};
The only thing I can figure out is that having the <pr-details> tag between the parent "clearfix" <div> and the the child "pull-right" <div> interferes with the parent-child relationship for the Bootstrap "clearfix" implementation.
Can anyone shed any light on this? Is there a way to get these two things to work together? I can make this work by refactoring the HTML a bit, but I'm curious about to do this for future use.
I have a requirement of getting the text below of "ELECTRONIC ARTS" (this can change according to data) using class title "Offered By" (this class will be same for all) using Xpath. I tried various xpath coding, but couldn't get the results I want. I'm really looking for someone's help on this.
<div class="meta-info">
<div class="title"> Offered By</div>
<div class="content">ELECTRONIC ARTS</div> </div>
This is one possible XPath expression to starts with, which then you can simplify or add more criteria as needed (XPath formatted to be more readable) :
//div[
#class='meta-info'
and
div[#class='title' and normalize-space()='Offered By']
]/div[#class='content']
explanation :
//div[#class='meta-info' and ... : find div element where class attribute value equals "meta-info" and ...
div[#class='title' and normalize-space()='Offered By']] : ... has child element div where class attribute value equals "title" and content equals "Offered By"
/div[#class='content'] : from such div (the <div class="meta-info"> to be clear), return child element div where class attribute value equals "content"
Using the examples on Mozilla:
var xpath = document.evaluate("//div[#class='content']", document, null, XPathResult.STRING_TYPE, null);
document.write('The text found is: "' + xpath.stringValue + '".');
console.log(xpath);
<div class="meta-info">
<div class="title"> Offered By</div>
<div class="content">ELECTRONIC ARTS</div>
</div>
By the way, I think document.querySelector or document.querySelectorAll are much more convenient in this situation:
var content = document.querySelector('.meta-info .content').innerText;
document.write('The text found is: "' + content + '".');
console.log(content);
<div class="meta-info">
<div class="title"> Offered By</div>
<div class="content">ELECTRONIC ARTS</div>
</div>
Basically I'm using bootstrap CSS with the panels / headers
I have an API going from Twitch.tv's Kraken that grabs 3 streams
My problem is it shows the 3 streams in the one box
http://jsfiddle.net/82wNq/28/
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><div id="content1"></div> - <div id="content2"></div></h3>
</div>
<div class="panel-body">
<div id="content3"></div>
</div>
</div>
If anyone could give me any pointers I'd be really greatful
You are adding all elements together in loop.
Re-Create elements & add separately.
DEMO:
http://jsfiddle.net/82wNq/30/show/
CODE:
http://jsfiddle.net/82wNq/30/
function (data) {
var temp = "";
$.each(data.streams, function (index, item) {
temp = temp + "<div class='panel-heading'><h3 class='panel-title'></h3><div id='content1'>" + item.channel.display_name + "</div><div id='content2'>" + item.viewers + "</div></div><div class='panel-body'><div id='content3'><img src='" + item.preview.medium + "'/></div></div>";
});
$("#content").html(temp); }
Here's the part of the HTML (simplified for the question):
<a href="/auctions?id=4672" class="auction sec">
<div class="progress">
<div class="guarantee">
<img src="/img/ico/2.png" />
</div>
</div> </a>
<a href="/auctions?id=4670" class="auction">
<div class="progress">
<div class="guarantee">
<img src="/img/ico/1.png" />
</div>
</div> </a>
What I want to get is the vector containing the ids of the auctions, for which the 2.png image is displayed (id=4672 in this case). How to construct the Selector query in order to obtain this?
http://jsoup.org/apidocs/org/jsoup/select/Selector.html - Here I can only find how to select the children, not the parents...
Any help appreciated, including the usage of other libraries. I've tried Jsoup because it seemed to be the most popular.
You can use parent() method:
final String html = "<a href=\"/auctions?id=4672\" class=\"auction sec\"> \n"
+ " <div class=\"progress\"> \n"
+ " <div class=\"guarantee\"> \n"
+ " <img src=\"/img/ico/2.png\" /> \n"
+ " </div> \n"
+ " </div> </a>\n"
+ "<a href=\"/auctions?id=4670\" class=\"auction\"> \n"
+ " <div class=\"progress\"> \n"
+ " <div class=\"guarantee\"> \n"
+ " <img src=\"/img/ico/1.png\" /> \n"
+ " </div> \n"
+ " </div> </a>";
Document doc = Jsoup.parse(html);
for( Element element : doc.select("img") ) // Select all 'img' tags
{
Element divGuarantee = element.parent(); // Get parent element of 'img'
Element divProgress = divGuarantee.parent(); // Get parent of parent etc.
// ...
}