I am trying to change the class for an li
this is what I have but its not working:
var selectorsList = $('.myselectorClass').find('li');
$(selectorsList).each(function(i,k){
$(k).addClass('selected');
});
here is the html:
<div class="myselectorClass" data-multiselect="1" data-type="zusize" id=zusize>
<ol>
<li class="" >2T</li>
<li class="" >3T</li>
</ol>
</div>
Thanks
it is as simple as - there is no need to iterate using each, jQuery will do it for you
$('.myselectorClass').find('li').addClass('selected');
Demo: Fiddle
Try:
$(selectorsList).each(function(){
$(this).addClass('selected');
});
This works. Here is the jsFiddle.
Related
I have the JSON from my controller as below:
{"ja":
[
{
"ID":0,
"Name":"Son",
"DepartmentID":0,
"isNewProduct":false,
"PictureName":null,
"isInstock":false
}
,
{
"ID":0,
"Name":"AM4-B2",
"DepartmentID":0,
"isNewProduct":false,
"PictureName":null,
"isInstock":false
}
,
{
"ID":0,
"Name":"AM4-B2",
"DepartmentID":0,
"isNewProduct":false,
"PictureName":null,
"isInstock":false
}
]
}
This is my menu that I'm going to click on it :
<ul id="navmenu-v">
<li id="select_list" class="level1">
<a id="56" class="selectedcategory" href="javascript:void(0);">Accessories</a>
</li>
<li id="select_list" class="level1">
<a id="69" class="selectedcategory" href="javascript:void(0);">Audio Players</a>
</li>
</ul>
And these are the div that I want to put each json in in :
<div id="container">
<div id="id"></div>
<div id="name"></div>
<div id="departmentID"></div>
<div id="isNew"></div>
<div id="pictureName"></div>
<div id="isStock"></div>
</div>
then I want to loop all the JSON into different div beside the in my view when I click on my Menu.
Could anyone tell me how can I do that using $.getJSON() and $.each()? Thanks so much.
first ull have to bind the menu anchor elements to the click events like this
$("#56").click(function(){
$.getJSON("baseUrl/Accesories",function(data){
$.each(data,function(index,value){
$('div#id').html($('div#id').html()+value.ID);
//simillarily you can do for others too
});
});
});
I try to build a simple blog application with knockout.js and rails.
(knockout v1.3 beta, knockout mapping plugin v2.0.2)
<h3>Posts</h3>
<ul data-bind="foreach: posts">
<li>
<input data-bind="value: title" />
</li>
</ul>
<script>
var posts = ko.mapping.fromJSON('<%= #posts.to_json.html_safe %>');
ko.applyBindings(posts);
</script>
this displays alle the posts from a rails app, no problem so far.
but now i want to add a custom event to the posts, e.g. a remove event.
i tried this:
<h3>Posts</h3>
<ul data-bind="foreach: posts">
<li>
<input data-bind="value: title" />
</li>
</ul>
<script>
var posts = ko.mapping.fromJSON('<%= #posts.to_json.html_safe %>', { remove: function() {
alert('working');
});
ko.applyBindings(posts);
</script>
but i get an error "remove is not defined"
any ideas?
you could just add the function to the posts viewModel, like this:
var posts = ko.mapping.fromJSON('<%= #posts.to_json.html_safe %>');
posts.remove = function() { alert('working'); }
Is it possible to have multiple split buttons in a jQuery mobile list?
I've tried doing this:
<ul data-role='listview'>
<li>
<a href='#' id='1'>1</a>
<a href='#' id='btn1'></a>
<a href='#' id='btn2'></a>
</li>
</ul>
But it doesn't work. Neither does wrapping the links in a <div data-role='controlgroup>. Am I doing something wrong, or is it just not possible without a hack?
UPDATE: The list is dynamically generated by doing $("#listid).append("<li>...</li>"). http://jsfiddle.net/nrpMN/3/ . As pointed out by mdmullinax below, the following does work:
<ul data-role='listview'>
<li>
<a href='#' id='1'>1</a>
<div data-role='controlgroup' data-type='horizontal'>
<a href='#' id='btn1'></a>
<a href='#' id='btn2'></a>
</div>
</li>
</ul>
Thanks
Sounds like what you want is a horizontal controlgroup nested in a listview.
http://jsfiddle.net/nrpMN/
<ul data-role='listview'>
<li>
<div data-role="controlgroup" data-type="horizontal">
Yes
No
Maybe
</div>
</li>
</ul>
Here is extension to the solution. Problem with above solution is that you cannot control the placement of buttons on the right side of the list item. One way to do it is add class='ui-li-aside' to the control. That will make the buttons come on right, but you will have to adjust the area which aside covers, by default it is 50%. You can modify it to reduce it so that it does not cover your list content on left
.ui-li-aside { float: right; width: 10%; text-align: right; margin: .3em 0; }
Or you can add another class
.ui-li-asideNew { float: right; width: 10%; text-align: right; margin: .3em 0; }
And change the div to adjust the
<ul data-role='listview'>
<li>
<div class='ui-li-aside' data-role="controlgroup" data-type="horizontal">
Yes
No
Maybe
</div>
</li>
</ul>
I think, Controlgroup not rendered well in dynamic listview. You should make complete html code for controlgroup in dynamic listview.
<li>
<a href='#popupItem' data-rel='popup'>List Text</a>
<div class='ui-controlgroup-controls' style='width: 110px;float: right;position: absolute;right: 0em;top: 0.5em;'><a href='#' id='tolistminus' data-role='button' data-icon='minus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-minus ui-btn-icon-notext ui-shadow ui-corner-all ui-first-child' role='button'>-1</a><a href='#' id='tolistplus' data-role='button' data-icon='plus' data-iconpos='notext' style='width: 1.0em;float: left;' data-theme='b' class='ui-link ui-btn ui-btn-b ui-icon-plus ui-btn-icon-notext ui-shadow ui-corner-all ui-last-child' role='button'>+1</a></div>
</li>
I'm toggling a class that hides and unhides a div within a list item, but I'm having problems applying a slideToggle to it.
Here is the HTML and CSS;
<style>
.collapsed .widget-content {
display:none !important;
}
</style>
<ul id="column1" class="column">
<li class="widget color-green" id="intro">
<div class="widget-head">
<a class="collapse" href"#">collapse</a>
<h3>The Title</h3>
</div>
<div class="widget-content">
<p>content here</p>
</div>
</li>
</ul>
Here is the jQuery to toggle the class of the li on click on the link with the class "collapse"
$(this).parents(settings.widgetSelector).toggleClass('collapsed');
How do I apply the slideToggle so that it only slides away the "widget-content" div whilst toggling the "collapsed" class on the li at the same time?
Thanks in advance for your advice.
you could try a callback when the toggle is complete:
$(this).parents(settings.widgetSelector).slideToggle('slow', function() {
$('#intro').toggleClass('collapsed');
});
something like that?
My question is similar, but different from jquery-hover-menu-when-hovering-over-child-menu-disappears.
I originally had the hover event on the li.item, which was a little quirky, but did what i needed it to do. I switched the hover to the span so that the event would fire on the text block, rather than the list block, which expands the full width of the list.
The effect I'm trying to achieve is when hovering over ul.sub. I'd like it to continue with the animation in queue from span.text's hover, which is displaying it, but also keep it open.
What is happening is that the mouse is leaving the span, so the li.item is firing its mouseout portion of the trigger.
jsFiddle Page
HTML
<ul id="main">
<li class="head">Title Bar</li>
<li class="item odd">
<span class="text">A</span>
<ul class="sub">
<li>1</li>
<li>2</li>
</ul>
</li>
<li class="item even">
<span class="text">B</span>
<ul class="sub">
<li>3</li>
<li>4</li>
</ul>
</li>
<li class="item odd">
<span class="text">C</span>
<ul class="sub">
<li>5</li>
<li>6</li>
</ul>
</li>
<li class="item even">
<span class="text">D</span>
<ul class="sub">
<li>7</li>
<li>8</li>
</ul>
</li>
</ul>
CSS
/* colors used are not for production; they are
used only to enhance the example's visual distinction */
#main{width:10em;}
.head,.item{border:1px solid black;padding:.5em;}
.head{font-weight:bold; background:#336; color:#fff; cursor:pointer;}
.item{background:#f90;}
.sub{display:none;}
.sub li{padding-left:1em;}
.text,.sub{cursor:pointer;}
JavaScript
$(document).ready(function(){
// specific here because of other divs/list items
$('#main li.item span.text').hover(function(){
$(this).siblings().stop(true,true).toggle('slow');
});
$('li.head').hover(function(){
$(this).parent().find('ul.sub').stop(true,true).toggle('slow');
});
});
Edit:
I think something along these lines is what I need, however the animation is refired when going from the sub to the span.
$(document).ready(function(){
// specific here because of other divs/list items
$('#main li.item span.text').hover(
function(){$(this).siblings().stop(false,true).show('slow');}
,function(){$(this).siblings().stop(true,true).hide('slow');}
);
$('#main li.item ul.sub').hover(
function(){$(this).stop(false,true).show();}
,function(){$(this).stop(false,true).hide('slow');}
);
$('li.head').hover(function(){
$(this).parent().find('ul.sub').stop(true,true).toggle('slow');
});
});
Split the hover behavior into its two constituents, mouseenter and mouseleave. Also split toggle() into show() and hide(). Bind mouseenter to the span.text and mouseleave to the li.item:
$(document).ready(function() {
// specific here because of other divs/list items
$('#main li.item span.text').mouseenter(function() {
$(this).siblings().stop(true, true).show('slow');
});
$('#main li.item').mouseleave(function() {
$(this).children("ul").stop(true, true).hide('slow');
});
$('li.head').hover(function() {
$(this).parent().find('ul.sub').stop(true, true).toggle('slow');
});
});
That way, the hover is not triggered by whitespace, which is what you want.