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.
Related
I wrote the following code to populate a menu item:
<li class="dropdown">
Wallets <span class="caret"></span>
<ul class="dropdown-menu">
{{#if: !wallets}}
<li><a><i class="fa fa-spinner fa-pulse"></i> Loading...</a></li>
{{/if}}
{{#foreach: wallets}}
<li>
{{linkText}}
</li>
{{/foreach}}
<li role="separator" class="divider"></li>
<li><i class="fa fa-fw fa-edit"></i> Add new</li>
</ul>
</li>
I'm using knockout.punches as I'm more into curly braces than data-binding every element. wallets is an observable array loaded and kept up-to-date by SignalR.
Ok so far, but this is the way the code is rendered before the wallets observable is defined:
I'm new to knockout so maybe there's some clue I don't know about, but in general I've found little information on punches extension. Where am I wrong?
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:"]
I am having issues determining if a particular dom object is visible or not. I have the following code outputting to the console and it always returns false even though I can see the element on the screen.
console.log(itemElement.innerText +" is visible: " + $(itemElement.id).is(':visible'));
The context that I am testing is to see whether a list item in a jQuery Accordion object is visible or not. I am iterating through all the list elements (including sub list elements) and performing this check. Always the check returns false. I have googled everywhere for an answer but couldn't find one.
Here is the html to show what the layout looks like. I have edited it a bit to keep it reasonable but you should get a good idea of how it is set up.
<div id="collection_form">
<div id="element_container">
<ul class="element_list element_group ui-sortable">
<li id="de_1" class="element_group_parent eg-collapsed element_group_leaf">
stuff in here is same as below
</li>
<li id="de_29" class="element_group_parent eg-collapsed element_group_leaf">
<div>
<span>Room Booking</span>
<span class="element_type"> - Group</span>
<span class="remove_element">remove</span>
<div style="clear:both"></div>
</div>
<ul class="element_group">
<li id="de_30" class="element_config_form element_group_leaf">
<div>
<span>Room Number</span>
<span class="element_type"> - Text</span>
<span class="remove_element">remove</span>
<div style="clear:both"></div>
</div>
</li>
</ul>
</li>
<li id="de_31" class="element_group_parent eg-collapsed element_group_leaf">
<div></div>
<ul class="element_group">
<li id="de_32" class="element_config_form element_group_leaf">
<div> more stuff </div>
</li>
</ul>
</li>
</ul>
</div>
</div>
What is it that I am doing wrong?
Try this :
$(itemElement).is(':visible'); // this works if itemElement is a DOM element, or even if itemElement is a jQuery wrapped DOM elemenent
i suspect your itemElement.id is undefined
But if itemElement.id is correctly defined (as the id of your itemElement, in this case means that itemElement is a DOM element) you can do both these :
$("#"+itemElement.id).is(':visible');
or even better :
$(itemElement).is(':visible');
i have a simple nested UL's and i need to make only main UL sortable not the sub UL
example
<ul class="blocks-list" id="sortme">
<li>
<img src="../templates/admin/images/icons/fugue/status.png" width="16" height="16"> Task name
<ul class="tags float-right">
<li class="tag-time">5 days</li>
<li class="tag-tags">Server</li>
<li class="tag-user">You</li>
</ul>
</li>
<ul class="mini-blocks-list">
<li>
<img src="../templates/admin/images/icons/fugue/status.png" width="16" height="16"> Task name
<ul class="tags float-right">
<li class="tag-time">5 days</li>
<li class="tag-user">You</li>
</ul>
</li>
</ul>
<li>
<img src="../templates/admin/images/icons/fugue/status.png" width="16" height="16"> Task name
<ul class="tags float-right">
<li class="tag-time">5 days</li>
<li class="tag-user">You</li>
</ul>
</li>
</ul>
when i used this Jquery Code
$("#sortme").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "sort_menu.php",
type: "post",
data: serial,
error: function(){
alert("theres an error with AJAX");
}
});
}
});
it made both UL blocks-list and mini-blocks-list sortable
what i need is only to make blocks-list LI's sortable not both UL's
It seems a limitation in jQuery sortable, you could try this plugin or this one if you don't find out a pure jQuery solution.
You can use the sortable items option to filter exactly what you need and to keep other items from being sortable. For example items: "> li". docs
A quick sketch of my situation is:
<ul id="selectable">
<li class="table" id="header-row">
<ul class="row">
...
</ul>
</li>
<li class="table">
<ul class="row">
...
</ul>
</li>
...
</ul>
How do I disable li#header-row from being selectable?
You can use the filter option to include (or with :not, exclude) options
$("#selectable").selectable({
filter: ":not(#header-row)"
});
JSFiddle: http://jsfiddle.net/M7pmU/