hpple html parse block by block or property by property? - iphone

I'm new about hpple and xpath. for the below html code,I want to get both "title" and "tag" information.
From hpple's example code, I can get a array of title, and another array of tag. But if there are six properties I'm interested, there will be six arrays.
can I find the div[class="entry"], then get its child's , div[class="meta"]? (can anybody share the code?)
Thanks.
<div class="content">
<div id="1" class="entry">
<h2 class="title"> title for entry 1 </h2>
<div class="meta"> tag:xxx </div>
</div>
<div id="2" class="entry">
<h2 class="title"> title for entry 2 </h2>
<div class="meta"> tag:xxx </div>
</div>
...
</div>

#"//div[#class='content']//div[#class='entry']//div[#class='meta']"
This returns tag:xxx for both entries.

I want to get both "title" and "tag" information
//div[#class='content']/div[#class='entry']/*[#class='meta' or #class=title"']
This XPath gets all tags with class title or meta children of div class entry child of any div class content.

Related

Show Hide HTML Attribute in AEM

Let's pretend I have a boolean paratemeter called isDisabled. If isDisabled is true, we want to add a custom html attribute called data-enable-hide; otherwise, we will not show the html attribute.
The option I could think of is:
<div data-sly-test="${model.isDisabled}">
<div class="container" data-enable-hide>
Hello World
</div>
</div>
<div data-sly-test="${!model.isDisabled}">
<div class="container">
Hello World
</div>
</div>
This option would work but it would duplicate the inner HTML because the only difference is to show and hide the HTML attribute. Is there any specific syntax from AEM that would allow me to show/hide HTML attribute based on boolean condition?
You can make use of test conditions directly within the attribute as shown below
<div class="container" data-enable-hide="${isDisabled || ''}">
Hello World
</div>
This would output <div class="container" data-enable-hide="true"> if isDisabled is true or it will remove the whole attribute if it is false i.e., the output would be <div class="container"> when false
data-sly-test="${!model.isDisabled}"
What syntax is this?
Use an IF condition if possible:
#if(isDisabled)
{
<div class="container" data-enable-hide>
Hello World
</div>
}

Add class to Woocommerce out-of-stock product cards - using Hestia theme

I am using Hestia Wordpress Theme, and I am trying to add a class "out-of-stock" to product cards that meet that condition. I have tried some functions, but without success.
The product card looks like this:
<div class="card card-product pop-and-glow">
<div class="card-image">
... content of card-image ...
</div>
<div class="content">
... here comes content ...
</div>
</div>
I would like to have something like this when the product is out-of-stock:
<div class="card card-product pop-and-glow out-of-stock">
<div class="card-image">
... content of card-image ...
</div>
<div class="content">
... here comes content ...
</div>
</div>
Any hint would be appreciated.
Thanks a lot
R-)

Selenium- Tag traversal Xpath for facebook First name not working

<div id="reg_form_box" class="large_form">
<div class="clearfix _58mh">
<div class="mbm _3-90 lfloat _ohe">
<div id="u_0_0" class="_5dbb">
<div class="uiStickyPlaceholderInput uiStickyPlaceholderEmptyInput">
<div class="placeholder" aria-hidden="true">First name</div>
<input id="u_0_1" class="inputtext _58mg _5dba _2ph-" data-type="text" name="firstname" aria-required="1" placeholder="" aria-label="First name" aria-controls="js_0" aria-haspopup="true" role="null" aria-describedby="js_w" aria-invalid="true" type="text"/>
</div>
<i class="_5dbc img sp_beZQzZ7Rg6Q sx_5ca7f2"/>
<i class="_5dbd img sp_beZQzZ7Rg6Q sx_9c246c"/>
</div>
Above is the code for which i want to write Xpath using tag name traversal. Here is the xpath i have made
"//div[#id='reg_form_box']/div[1]/div[1]/div[1]/div/input"
Please suggest what's wrong here and how can i correct the same. Website is Facebook and field is First name on homepage.
Ideally unless you have a case of multiple modes that match the same xpath, you don't have to traverse through the entire hierarchy.
This will work:
//input[#name='firstname']

Perl Scrappy select using class attribute

I was trying to scrape using Perl Scrappy. I would like to select html elements with class attribute using 'select'.
<p>
<h1>
<a href='http://test.com'>Test</a>
<a href='http://list.com'>List</a>
</h1>
</p>
<p class='parent-1'>
<h1>
<a class='child-1' href="http://sample.com">SampleLink</a>
<a class='child-2' href="http://list.com">List</a>
</h1>
</p>
I need to get element('a' tag) with class name 'child-1' which is a child nod of <p class='parent-1'> using select method.
I have tried like this
#!/usr/bin/perl
use Scrappy;
my $scraper = Scrappy->new;
$scraper->get($url);
$scraper->select('p a')->data;
But it will select the first 'p' tag also.
Could you please help me with this?
Bearing in mind choroba's warning, to select an <a> element with a class of child-1 that is a child of a <p> element with a class of parent-1 you would write
$scraper->select('p.parent-1 > a.child-1')
The problem is that in HTML, a <p> tag can't contain a <h1> tag. In fact, the HTML is parsed as
<p></p>
<h1>
<a href='http://test.com'>Test</a>
<a href='http://list.com'>List</a>
</h1>
<p class='parent-1'></p>
<h1>
<a class='child-1' href="http://sample.com">SampleLink</a>
<a class='child-2' href="http://list.com">List</a>
</h1>

How to get the index of the ACTIVE CHILD div of my container with jQuery?

<div id="container">
<div class="active">
<div class="active"></div>
</div>
<div>
</div>
</div>
How to write such a container?
Use .index() without parameters to get it's (0-based) index amongst siblings, like this:
var index = $("#container .active").index();
You can test it out here. For your example markup, it would be 0.