<a href="http://link.com">
<div style="background-image:url(https://imageurl.jpeg);">
</div>
</a>
Is there a selector in xpath that allows for getting the value of a certain css declaration, bearing in mind that it is an inline style.
In the code example above I want to retrieve the value of the "background-image" prop.
You could use the xpath :
substring-before(substring-after(//div/#style, 'background-image:url('), ')')
Related
The part of HTML code is;
*...
<ul class="daily_summary">
<li class="odd">
<span> TODAY'S <br> TEST <br> RESULT </span>
<strong class="todays-test-result">123.987</strong>
</li>
</ul>
...*
XPath code : //li/span
returns TODAY's TEST RESULT
But;
XPath code : //li/span[#strong='todays-test-result']
does not return the value (123.987)
How can I get the value with XPATH?
strong tag is not in the span tag. Therefore your XPath should not include it. Following XPath should work : //li/strong[#class="todays-test-result"]
#Rixcy 's comment is pretty helpful.
Also to add on to this, the # selector is used for attributes on a tag, so in this case strong is the tag, but #class is the attribute. A useful resource for xpath is: devhints.io/xpath - #Rixcy
I am trying to add existing division of Odoo product template in a new division. for that, I can do the "replace" of the whole division. and add my custom division.
for example, here is default Odoo template section with the div.
<section t-attf-class="container mt8 oe_website_sale" id="product_detail">
<div class="row" id="odoo_default_row">
</div>
</section>
and I wanted to add odoo_default_row div in my custom div element. like
<section t-attf-class="container mt8 oe_website_sale" id="product_detail">
<div id="my_custom_div">
<div class="row" id="odoo_default_row">
</div>
</div>
</section>
what is the best way to add existing division in the custom division despite using xpath replace?
We can replace whole div element using "replace" attribute. With these, we can freely design custom div element.
Try with following code:
<div id="odoo_default_row" position="replace">
<!-- Design your div element as per your requirement-->
</div>
NOTE:
As per my understanding with your situation is that "inside" attribute will not work.
How can we use function anchor of codeigniter for div tag?
I got div around which I want to put anchor(uri segments, text, attributes)
in pure html it looks like this:
<a class="a_services" href="http://justinbieber.com">
<div id="seminar">Hello world</div>
</a>
You can include code in the second parameter.
echo anchor('http://justinbieber.com', '<div id="seminar">Hello world</div>', 'class="a_services"');
I was playing with angular.js the other day and I found this filter function, that angular.js provides for us.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
My question is: Can I use angular.js filter on premade html elements, somehing like this.
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
</div>
<div class="span10">
<!--Body content-->
<ul class="phones" ng-filter:query>
<li>First element</li>
<li>Second elementy/li>
<li>Third element</li>
</ul>
</div>
</div>
</div>
Thank you for your answers!
For this kind of DOM manipulation/filtering, Angular directives ngSwitch or ngShow/ngHide are normally used.
<ul class="phones" ng-switch on="query">
<li ng-switch-when="Nexus S">First element</li>
The above would look for an exact match though (so it is not as nice as #tosh's directive). ng-switch is often used with a select drop-down, where the possible values are fixed/known.
ngShow/ngHide are probably a better match for what you are trying to do. An in-line expression or $scope function can be used to determine whether to show an element:
<li ngShow="some expression using query">First element</li>
<li ngShow="myFilter()">First element</li>
function MyCtrl($scope) {
$scope.myFilter = function() {
if($scope.query ...) { // could use RegExp() here like #tosh
return true
}
return false
}
The above does not require jQuery.
No. Your first example uses a filter - called "filter"! A filter can form part of an Angular binding expression. It is placed after a pipe character, and applies a "filter function" to the part of the expression that came before the pipe. Some filters also take additional parameters, to the right of a colon. The filter called "filter" acts on an Array (the part before the pipe, in this case phones) passing each item through a check determined by the parameter to the right of the colon. In your case, using a string variable called query, it returns an Array with any items from phones that contain the string in query.
Other examples of filters in Angular include currency, date, uppercase and orderBy. They all take an input (for example a string) returning another value (for example the uppercase version of the string) and in some cases additional configuration parameters (such as a date or currency format, or field to order by). But they only work with an input that is some value in the "data model", not directly on the content of a DOM node.
Your second example attempts to use a directive called "ngFilter". A directive is an extension to standard HTML syntax, and can be expressed as hyphenated attributes (as in this case), data- attributes (data-ng-filter), namespaced attributes (ng:filter), css classes, etc. Angular's default directives have the prefix "ng". But there is no such directive as "ngFilter" in Angular. Your example will load fine, but there will be no effect on the DOM processing from adding this non-existent directive.
I do not think that is part of the default directive, but
that's interesting task.
I tried to implement with a custom directive. http://plnkr.co/edit/TOGbtq
app.directive('ngFilter', function() {
return {
link: function(scope, element, attr) {
scope.$watch(attr.ngFilter, function(q){
$(element).children().each(function(i,a){
$(a).toggle((new RegExp(q)).test($(a).text()));
});
});
}
};
});
I've the following html:
<li><a href="/stumbler/millisami/tag/company/" class="">
<span class="right">69</span>
company</a>
</li>
and I want to scrap the text after the span tag, i.e. "company"
So, when I tried
doc.at_css("span:after")
the no method error :after is thrown.
How to use pseudo selectors with Nokogiri??
According to the CSS 2.1 standard, the ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content, but not to per se select elements.
You can workaround this shortcoming using
doc.at_css("span").next_sibling()