There is a list:
<ul class="params">
<li> <span>Brand:</span> Casio </li>
<li> <span>Gender:</span> male </li>
<li> <span>Material:</span> metal </li>
</ul>
I am trying to extract specific "Gender" parameter. So I want to extract <li> element that has this information:
<span>Gender:</span> male
This is how I am trying to do it:
//ul[#class="params"]/li[text()[contains(.,'Gender')]]
Not working.
How to extract this specific <li> element?
The "Gender:" is a child of span, not li:
//ul[#class="params"]/li[span="Gender:"]
Related
I'm trying to do an importxml on googlesheets, I'm trying to get the value within the first span tag "$2,760,771,621 USD" in the following code
<ul class="cmc-details-panel-stats k1ayrc-0 gkPvKy">
<li>
<div>
<span>$2,760,771,621 USD</span>
</div>
</li>
<li>
<div>
<span>$394,018,520 USD</span>
</div>
</li>
</ul>
I tried
=IMPORTXML("website.com","//ul[#class='cmc-details-panel-stats']")
and get a #N/A
How can this be done?
In this case, I would like to propose the xpath of //ul[contains(#class,'cmc-details-panel-stats')]/li[1]//span[1].
Modified formula:
=IMPORTXML(A1,"//ul[contains(#class,'cmc-details-panel-stats')]/li[1]//span[1]")
In this formula, the URL of https://coinmarketcap.com/currencies/cardano/ is put in the cell "A1".
Result:
Note:
In this case, I thought that the following sample HTML might be suitable for thinking the solution as the sample HTML.
<ul class="cmc-details-panel-stats k1ayrc-0 gkPvKy">
<li>
<div>
<span>$2,760,771,621 USD</span><span>###</span>
</div>
</li>
<li>
<div>
<span>$394,018,520 USD</span><span>###</span>
</div>
</li>
</ul>
Reference:
IMPORTXML
I am trying to display custom images for my list of objects. The images are stored in the database as one of the properties on the object and returned to my template in the model.
<ul>
<li th:each="fruit : ${MyPage.fruitList}">
<div class="field" th:onclick="'javascript:doSubmit(\'' + ${fruit.guid} + '\');'">
<ul>
<li th:each="property:${fruit.fruitProperties}">
<div th:if="${property.propertyName}=='fruit_image'">
<img alt="fruit_image" id="fruitImage" th:src="${property.propertyValue}" style="width:100px;height:100px;"></img>
</div>
</li>
</ul>
<label th:text="${fruit.name}" class="radio-label"></label>
</div>
</li>
</ul>
With above code, I am able to successfully display the image that is stored as property 'fruit_image' on the fruit object in database.
Now the question I have is, how do I display a default image if the property 'fruit_image' is not present on the fruit? Is there a way i can set a flag or variable inside the 'if'?
Thank you!
No, there isn't a way to change a variable in Thymeleaf like that. That being said, you can use collection projection to check for the existence of that property. For example, this is how I would do a default image:
<ul>
<li th:each="property:${fruit.fruitProperties}">
<div th:if="${property.propertyName}=='fruit_image'">
<img alt="fruit_image" id="fruitImage" th:src="${property.propertyValue}" style="width:100px;height:100px;"></img>
</div>
</li>
<li th:unless="${#lists.contains(fruit.fruitProperties.![propertyName], 'fruit_image')}">
<div>
<img alt="fruit_image" id="fruitImage" src="DEFAULT-IMAGE.jpg" style="width:100px;height:100px;"></img>
</div>
</li>
</ul>
Rather than looping through all the properties, something like this could work for you as well.
<ul th:with="has_image = ${#lists.contains(fruit.fruitProperties.![propertyName], 'fruit_image')}">
<li th:if="${has_image}">
<img alt="fruit_image" id="fruitImage" th:src="${fruit.fruitProperties.^[propertyName == 'fruit_image'].propertyValue}" style="width:100px;height:100px;" />
</li>
<li th:unless="${has_image}">
<img alt="fruit_image" id="fruitImage" src="DEFAULT-IMAGE.jpg" style="width:100px;height:100px;"></img>
</li>
</ul>
I'm trying to limit foreach item. here it is my source :
<div class="build-failed">
<h1 class="jenkins-status"><span data-bind="title"></span> FAILED</h1>
<ul class="list-nostyle list-failed">
<li data-foreach-item="failedJobs">
<div class="label" data-bind="item.label"></div>
<div class="value" data-bind="item.value"></div>
</li>
</ul>
</div>
<div class="build-succeeded">
<h1 class="jenkins-status">All <span data-bind="title"></span> builds are successful</h1>
<i class="fa fa-thumbs-o-up"></i>
</div>enter code here
<p class="updated-at" data-bind="updatedAtMessage"></p>
and I want to get only 3 results. I know that I have to add something in "data-foreach-item" but I don't know what is it.
With <iron-list>, your <ul> can be rewritten as
<ul>
<iron-list items="[[failedJobs]]">
<template>
<li>
<div class="label">[[item.label]]</div>
<div class="value">[[item.value]]</div>
</li>
</template>
</iron-list>
</ul>
Try and see if the property, maxPhysicalCount, can get you only three results ;)
I thought I would find an applicable filter in the documentation:
http://batmanjs.org/docs/filters.html
But I couldn't find one! first returns only one item and truncate works for strings only, so neither of those would work.
You can create your own filter:
https://www.softcover.io/read/b5c051f3/batmanjs_mvc_cookbook/html#sec-custom_filter
For example, to limit an array to three items:
Batman.Filters.limit = (array, limit) -> array?.slice(0, limit)
Then, use it in your binding:
<li data-foreach-item="failedJobs | limit 3">...</li>
(Hmm, I hope data-foreach works with filters!)
Anyhow, hope it helps :)
Markup:
<ul>
<li>
<ul id="ratx">
<li>Location</li>
<li class="bar"><span></span></li>
<li class="value">4</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Hotel Services</li>
<li class="bar"><span></span></li>
<li class="value">5</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Hotel Facilities</li>
<li class="bar"><span></span></li>
<li class="value">3</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Room Cleanliness</li>
<li class="bar"><span></span></li>
<li class="value">4</li>
</ul>
</li>
<li>
<ul id="ratx">
<li>Value for Money</li>
<li class="bar"><span></span></li>
<li class="value">1</li>
</ul>
</li>
</ul>
I want to represent User Ratings dynamically using JQuery so I made a function like this,
jQuery:
$("ul#ratx").each(function(index) {
var val = $(this).children(".value").text();
var barval = val * 40;
/* compute ratings */
$("li.bar span").css("width", barval);
});
Now, when I alert barval I get all 5 values but when I try to apply the "compute ratings" line, all it does is apply the last value that it finds. How should I go about this?
Sorry if the question is a confusing. I am not quite sure how to phrase everything.
The problem is that, while interating through each elements it find, it is applying a common value to all li.bar span. You should represent a single element, you are trying to apply to.
$(this).children("li.bar span").css("width", barval);
Update
Here is a working Demo
The snippet that worked was
$(this).find("li.bar").children("span").css("width", barVal );
Also, I changed the display property of the span to display: inline-block;
You are setting the css for all the elements in the set $("li.bar span"). So at the end, they all have the same width of the last parsed value.
Without seeing you markup, it's difficult to propose you a code solution though.
Guys i have an requirement in which i have items in jquery sortable. but i also want the child item of the parent to be moved along with the parent.for example when i drag the item1 in the browser , the sub item1,2,3 should be moved along with them and dropped .
kindly let me know ,if there is any possibility through UI.
<ul>
<li>
<p> item 1</p>
<ul>
<li>
Sub item 1
</li>
<li>
Sub item 2
</li>
<li>
Sub item 3
</li>
</ul>
</li>
<li>
<p> item 2</p>
</li>
</ul>
You could apply a class or id to the first ul and only apply sortable to that unordered list:
HTML:
<ul id="sortable">
<li>
<p> item 1</p>
<ul>
<li>
Sub item 1
</li>
<li>
Sub item 2
</li>
<li>
Sub item 3
</li>
</ul>
</li>
<li>
<p> item 2</p>
</li>
</ul>
JavaScript:
$("#sortable").sortable();
This way, the inner uls are not sortable.
Working example: http://jsfiddle.net/andrewwhitaker/Ds7ds/