Scenario (minified):
<a>
<Sections>
<Section>
<Title></Title>
<Subject></Subject>
<Body></Body>
</Section>
<Section>
<Title/>
<Subject/>
<Body/>
</Section>
<Section>
<Title>Hello</Title>
<Subject></Subject>
<Body></Body>
</Section>
<Section>
<Title></Title>
<Subject>I have a problem</Subject>
<Body></Body>
</Section>
</Sections>
</a>
Question:
What XPath should I use to return a list of <Section/> nodes that have at least one child node not empty such that this is returned:
<Section>
<Title>Hello</Title>
<Subject></Subject>
<Body></Body>
</Section>
<Section>
<Title></Title>
<Subject>I have a problem</Subject>
<Body></Body>
</Section>
In other words, <Section> nodes with completely empty child nodes should be filtered out.
Try:
.//Section[./*/node()]
i.e. look for Section elements that have children that have children (text nodes or element nodes). This may or may not work depending on your requirement for empty child nodes, and may therefore need refinement.
If you are using XPath 2.0 you can use:
/a/Sections/Section[(true() = (for $i in * return has-children($i)))]
This checks for each child element if it has children and then checks if this is true for at least one children.
I am not sure if this can be achieved using XPath 1.0. The following works if there can be only text nodes as child elements:
/a/Sections/Section[not(. = "")]
However, this would not return the element if there is an empty element present, e.g. <Title><test/></Title>
try this xpath:
//a/Sections/Section[count(*[.!='']) > 0]
Related
I have a document:
<html>
<head>
<style>some styles<style>
</head>
<body>
<h1>Header</h1>
<table>table content</table>
<div>some text</div>
</body>
</A>
The below code moves the <style> tag below the <div> in <body>:
style = #doc.at_css "style"
body = #doc.at_css "body"
style.parent = body
Is there a way to move <style> above <h1>?
Finding the first child of the body and adding the style tag as previous sibling to first child solves the problem.
style = #doc.at_css "style"
body = #doc.at_css "body"
style.parent = body
first_child = body.first_element_child
first_child.add_previous_sibling(style)
This is my HTML format for all pages:
<html>
<head>
...
</head>
<body>
<p>...</p>
<slide>...</slide>
</body>
</html>
I want to set Microdata for that. Which format of these is correct?
<html itemscope itemtype="http://schema.org/WebPage">
<head>
<meta itemprop="name" content="webpage"/>
</head>
<body>
<p itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Article">
<meta itemprop="name" content="article"/>
</p>
<slide itemscope itemtype="http://schema.org/WPSideBar">.
<meta itemprop="name" content="slide"/>
</slide>
</body>
</html>
It seems above code is correct but when I check it on Google lab, it does not show that the slide tag is a child of WebPage. This is the result:
Item
type: http://schema.org/webpage
property:
name: webpage
maincontentofpage:
Item 1
Item 1
type: http://schema.org/article
property:
name: article
Item
type: http://schema.org/wpsidebar
property:
name: slide
So I try to solve this issue by adding a new itemprop. The best itemprop that I could find is 'text' or 'about':
<html itemscope itemtype="http://schema.org/WebPage">
<head>
<meta itemprop="name" content="webpage"/>
</head>
<body>
<p itemprop="about mainContentOfPage" itemscope itemtype="http://schema.org/Article">
<meta itemprop="name" content="article"/>
</p>
<slide itemprop="about" itemscope itemtype="http://schema.org/WPSideBar">.
<meta itemprop="name" content="slide"/>
</slide>
</body>
</html>
Now if I test it on Google lab the result is this:
Item
type: http://schema.org/webpage
property:
name: webpage
about: Item 1
maincontentofpage: Item 1
about: Item 2
Item 1
type: http://schema.org/article
property:
name: article
Item 2
type: http://schema.org/wpsidebar
property:
name: slide
Apparently the problem is solved and now Google knows 'slide' is a child of WebPage!
But my problem:
I do not feel good. Does this property really fit? ('about' or 'text')
Yes, if you want to relate the items to the WebPage, you have to use a property.
For the main content, we have mainContentOfPage. But what about elements that are not (part of) the main content?
Here’s a discussion about such a generic property for linking a WebPageElement to WebPage:
Am I right that WebPage lacks a generic property for linking to WebPageElement?
There is a proposal for a hasPart property: "A related CreativeWork that is included either logically or physically in this CreativeWork". This would be a good match, but until it becomes part of Schema.org (if at all), we’d have to use what is already there.
Possible existing properties could be:
about
citation
mentions
text
text has the problem that it expects Text, not another item. citation is probably, at least according to its description, meant for more specific cases. That leaves us with mentions and about, but both aren’t really fitting either.
So I’d say: Currently there is no good solution.
Personally, I’d just omit a property and leave the item unlinked (until a suitable property gets added to Schema.org).
I just copy pasted this from the first example in here:
http://www.recursion.org/d3-for-mere-mortals/
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<!--<script src="d3/d3.v3.js"></script>-->
<script src="/d3/d3.v3.js"></script>
<div>
<script>
var rectDemo = d3.select("#rect-demo").
append("svg:svg").
attr("width", 400).
attr("height", 300);
rectDemo.append("svg:rect").
attr("x", 100).
attr("y", 100).
attr("height", 100).
attr("width", 200);
d3.selectAll("body").append(rectDemo) ;
</script>
</div>
</body>
and it shows nothing on the page. I am sure I am doing something stupid here but this is my first example and can't figure out what is going it....
The script attempts to draw the rectangle in a svg element that's added inside the (already existing) element with id="rect-demo".
Therefore, you need to have an HTML element (for example a <div>) with the appropriate id:
<div id="rect-demo"> </div>
See this live demo: http://jsbin.com/enisen/2/edit
I want to retrieve div node located inside another div using xpath :
My input is:
<div id="toolbar">
<div class="linkTrail">
<span class="trailLabel">You are here: </span>
Home
Solutions
Industries
Home Care
</div>
<script type="text/javascript">var switchTo5x = false;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript"> stLight.options({ publisher: 'c4fa7e97-6938-4efa-b3d0-b81551cc9ee3', tracking: 'google' });</script>
<div class="clear">
</div>
I want output as:
<div class="linkTrail">
<span class="trailLabel">You are here: </span>
Home
Solutions
Industries
Home Care
</div>
I tried xpath following xpath to retrive linktrail div:
//div[#class='toolbar']/div
But its giving me wrong output:
<div class="linkTrail">
<span class="trailLabel">You are here: </span>
Home
Solutions
Industries
Home Care
</div>
<script type="text/javascript">var switchTo5x = false;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript"> stLight.options({ publisher: 'c4fa7e97-6938-4efa-b3d0-b81551cc9ee3', tracking: 'google' });</script>
what can be the issue, is it due to parent div contains script. Can anyone help me to figure out this problem.
As simple as this:
//div[#id='toolbar']/div[#class='linkTrail']
This selects any div, the string value of whose class attribute is "linkTrail" and that is a child of a div whose id attribute has string value "toolbar"
XSLT-based verification:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output omit-xml-declaration="yes" indent="yes"/>
<xsl:strip-space elements="*"/>
<xsl:template match="/">
<xsl:copy-of select="//div[#id='toolbar']/div[#class='linkTrail']"/>
</xsl:template>
</xsl:stylesheet>
When this transformation is applied to the provided XML document:
<div id="toolbar">
<div class="linkTrail">
<span class="trailLabel">You are here: </span>
Home
Solutions
Industries
Home Care
</div>
<script type="text/javascript">var switchTo5x = false;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript"> stLight.options({ publisher: 'c4fa7e97-6938-4efa-b3d0-b81551cc9ee3', tracking: 'google' });</script>
<div class="clear"></div></div>
the Xpath expression is evaluated and the result of the evaluation (the selected node(s)) is copied to the output:
<div class="linkTrail">
<span class="trailLabel">You are here: </span>
Home
Solutions
Industries
Home Care
</div>
In your XPath, you specify #class to be 'toolbar', but it is the #id that has the value. I am getting your desired output plus the "clear" div if I adjust the expression.
The problem might be the div is enclosed in another div that matches the condition.
Now i done the ADD /Remove Elements
How to add/remove elements dynamically, pease find the image attachment, which shows the better understand,
category which populate records from database category table, and when user select the particular category than sub category will populate from datbase sub category table,
am looking one jquery or some open which do this same work,
refer some good plugins,
How to add the element when i click the ADD Elment, please chekc my code below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
var hdn_add_element_cnt = $("#hdn_add_element_cnt").val();
hdn_add_element_cnt = parseInt(hdn_add_element_cnt);
var app_str = "<div id=element_"+hdn_add_element_cnt+">New Element "+hdn_add_element_cnt+" Delete</div>";
$('#element_area').append(app_str);
$("#add_element").click(function(){
var hdn_add_element_cnt = $("#hdn_add_element_cnt").val();
hdn_add_element_cnt = parseInt(hdn_add_element_cnt);
hdn_add_element_cnt = hdn_add_element_cnt+1;
var app_str = "<div id=element_"+hdn_add_element_cnt+">New Element "+hdn_add_element_cnt+" Delete</div>";
$('#element_area').fadeIn(10000).append(app_str);
//Increment Elemenet ID Count +1
document.getElementById("hdn_add_element_cnt").value = hdn_add_element_cnt;
})
})
function delete_element(element_id_no){
var get_element_hidden_cnt = $("#hdn_add_element_cnt").val();
$("#element_"+element_id_no).fadeOut(100).remove();
}
</script>
</head>
<body>
<div style="width:500px; height:200px; background-color:#FF0000;">
<div id="add_element" style="width:400px; height:75px;">
ADD Element
</div>
<div id="element_area">
</div>
</div>
<input type="hidden" id="hdn_add_element_cnt" value="1" />
</body>
</html>
jQuery doesn't need plugins to do this. Standard functions work well:
.append() adds elements, so to add a <div> to the <body>, just do this:
$('body').append('<div id="foobar">This is my text</div>');
.remove() similarly removes elements, so to remove that <div> that you added, just do this:
$('#foobar').remove();
.html() and .text() can be used to set the contents of an element. .text() is usually for setting the displayed text, and .html() is for adding content elements:
$('#foobar').text('Hello');
$('#foobar').html('<h1 class="foo">Hello</h1>');
Your question is really vague, so I'm not sure what else to say.