When clicked the button I want to get change the name of the class of li under mycontent div. Is there a way to do that? my codes are below.
<div id="mycontent">
<ul id="sortable">
<li id="1" class="myclass">Item 1</li>
<li id="2" class="myclass2">Item 2</li>
<li id="3" class="myclass3">Item 3</li>
<li id="4" class="myclass4">Item 4</li>
</ul>
</div>
$(document).ready(function()
{
$("#submit_prog").click(
function()
{
$.ajax(
{
type: "POST",
url: "sort2.php",
});
});
});
I'm pretty sure the jQuery would be something like:
$("#mycontent li.myclass2").removeClass("myclass2").addClass("myOtherClass2");
...etc for each li element.
if you wanted to change the class of all of li the elements, use this:
$("#mycontent li").removeClass("myclass myclass2 myclass3 myclass4").addClass("myOtherClass2");
you would add that to a click event on the button (in this example with id myClassChangeButton):
$("#myClassChangeButton").click(function(){
$("#mycontent li.myclass").removeClass("myclass").addClass("myOtherClass");
$("#mycontent li.myclass2").removeClass("myclass2").addClass("myOtherClass2");
$("#mycontent li.myclass3").removeClass("myclass3").addClass("myOtherClass3");
$("#mycontent li.myclass4").removeClass("myclass4").addClass("myOtherClass4");
});
Use this to change the class myclass2 from a li element in the div with the id mycontent:
$('#button').click(function(){
$('#mycontent li.myclass2').removeClass().addClass('newClass');
});
Edit:
Code Jockey mentioned that this will remove all classes from the li element with .myclass2
That's right, so for future readers, this will only remove .myclass2:
$('#mycontent li.myclass2').removeClass('myclass2').addClass('newClass');
Yes. Try this:
$('.button').click(function(){
$('li#4') .removeClass();
$('li#4').addClass('your_class')
});
Something along this lines should work
Related
I wish to customize a new style in ckeditor (under liferay 6.2).
So far, I'm able to create styles like this, in the ckconfig.jsp :
{name: 'Floating style', element: 'div', attributes: {'class': 'floating-list'}}
This is a style I would like to apply to a wrapping div parent to a the desired ul list. It would look like that :
<div class="floating-list">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
But the problem is that when I apply the style to my list, it of course applies to my ul li contents like this :
<ul>
<li><div class="floating-list">item</div></li>
<li><div class="floating-list">item</div></li>
<li><div class="floating-list">item</div></li>
<li><div class="floating-list">item</div></li>
</ul>
To avoid this behaviour, I wrote a little piece of jquery code :
$('.floating-list').closest('ul').each(function(){
var list = $(this);
var item = list.find('li');
item.each(function(){
$(this).html( $(this).find('.floating-list').html() );
});
list.replaceWith('<div class="floating-list"><ul>'+list.html()+'</ul></div>');
});
This works actually, but this is really dirty.
I'm wondering if there was a way to make it out. Thanks.
can try this:
CKEDITOR.instances.idofyourCKEditor.on('change', function() {
//for apply to all li's of ckeditor
jQuery(".cke_reset").contents().find("li").each(function(){
if(jQuery(this).parent().is("ul")){
jQuery(this).wrap("<div></div>"); //or .wrapInner( "<div class='new'></div>"); if you want do inside
}
});
});
with the event change can update the list when you are creating or editing
with the method contents() of jquery can update the elements inside of iframe .cke_reset, or the id if you can find him.
with the method parent() or children().eq(0) of jquery can get the element for check if is or not wrap
with the method wrap("<div class='chimichanga'></div>") and wrapInner( "<div class='new'></div>") can update the code html fast and easy.
This is the Div with UL on the webpage.
<div id='sites'>
<ul style="display: block;">
<li data-product-id="55">
Test1<br><em class="environment">Production</em>
</li>
<li data-product-id="99">
Test2<br><em class="environment">Production</em>
</li>
<li data-product-id="98">
Test3<br><em class="environment">Production</em>
</li>
<li data-product-id="61">
Test4<br><em class="environment">Production</em>
</li>
<li data-product-id="97">
Test5<br><em class="environment">Production</em>
</li>
<li class="active">
Test6<br><em class="environment">Production</em> <a class="flat button" href="/product_center">Settings</a>
</li>
</ul>
</div>
The page loads with Test6 ul by-default and I want to click on Test5.
The CSS locator provided by Firepath is "#sites>ul>li>a". So I tried this in casperjs:
var casper = require('casper').create({
verbose: true,
logLevel: "debug",
});
casper.start('http://localhost:8080', function() {
this.echo(this.getTitle());
});
casper.then(function(){
casper.page.injectJs('jquery.js');
this.evaluate(function (){
$("#sites>ul>li")[4].click();
});
this.capture('screenshot.png');
});
casper.then(function() {
this.echo(this.getTitle());
});
The title that comes up is always of the current page. It should have clicked on Test5 and fetched the title of the Test5 Page.
What I am doing wrong?
Try #sites .active as the selector
I'd do
this.click('#sites .active') instead of
casper.page.injectJs('jquery.js');
this.evaluate(function ()
{
$("#sites>ul>li")[4].click();
});
edit for comment:
try this then
#sites li:nth-child(5) a
square bracket for JS array returns "object HTMLDivElement"; while .slice() returns array.
click() function normally coming along with array objects.
So your codes should go to:
$("#sites ul li").slice(4,5).click()
I'm trying to do a vertical menu with dropdowns that can be activated by an arrow toggle, while still keeping the top level link active and clickable. I'm using a custom CMS so I have some constraints as far as how I can make this work.
HTML
<ul class="topnav">
<li class="tn_first">
<span></span><a class="topmenu" href="/default.asp">Home</a>
</li>
<li class="tn_mid">
<span></span><a class="topmenu" href="/listings.asp">My Listings</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Listing 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Listing 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Listing 3</a>
</li>
</ul>
</li>
<li class="tn_last">
<span></span><a class="topmenu" href="/links.asp">System Pages</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Page 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Page 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Page 3</a>
</li>
</ul>
</li>
</ul>
So I've got a pretty straightforward UL LI menu system. I've added to the template of the top level nav a span tag, which I wanted to use as a toggle switch. The span can be changed to anything, it's just what I have in there currently.
The issue I've run into is that given this is a template system, I have the option of putting the span in, but don't have the option to show it conditionally based on whether ul.subnav exists in the same li. So I need some way of applying display:block to the ones that actually meet this condition, then I'll just display:none the other spans by default.
I tried using this solution and it did work to a point, but it doesn't work with multiple dropdowns, it only seems to work if you have a single instance of a dropdown in your menu structure.
jQuery Toggle Dropdown Menu
and
http://jsfiddle.net/hXNnD/1/
Javascript
jQuery(document).ready(function () {
var subMenu = jQuery("li ul li");
var linkClick = jQuery("ul li").filter(":has(ul)");
subMenu.hide();
linkClick.click(function (e) {
e.preventDefault();
subMenu.slideToggle("fast");
});
});
I created another example that has 2 sub ULs so you can see where the code is falling down.
http://jsfiddle.net/BxsEX/
Hide with CSS your spans and go for: $('.topnav li:has(ul) span').show();
http://jsbin.com/ujoqek/1/edit
CSS:
.topnav li span{ display:none; }
jQ:
var arrow = ['▼','▲'];
$('.topnav li:has(ul) span').show().html( arrow[0] ).data('a',0);
$('.topnav li > ul').hide();
$('.topnav span').click(function(){
$(this).closest('li').find('ul').slideToggle();
var arrw = $(this).data('a');
$(this).html( arrow[++arrw%2] ).data('a', arrw);
});
I think this is all you wanted. I may be wrong.
$('li').each(function(){
//if we can find a UL with the class of subnav within our LI
if($(this).find('ul.subnav').length){
//find the span within this LI and give it a display block
$(this).find('span').css('display', 'block')
}else{
//otherwise, hide the span.
$(this).find('span').css('display', 'none')
}
});
I am having left side ul and right side ul. When i am clicking left side li making an ajax call in that ajax call i am adding a dynamic li in right side ul. The content was coming but the jquery mobile design was missing. I searched i got a solution like add $("#ul_id").listview('refresh') but it's not working for me.
$.post('/app/Unit/unit_detail', {item_id : task_id},
function(data){
$('#right_ul').html(data);
$("#right_ul").listview('refresh');
});
In my unit_detail.erb i am having the following code
<li class="showDetails" style="list-style:none;" data-theme="b">
<a href="#">
<div class="ui-grid-b">
<div class="ui-block-a"><div><%= unit_detail.name %></div></div>
<div class="ui-block-b"><div><%= unit_detail.description %> </div></div>
<div class="ui-block-c"><div><%= unit_detail.accessories %> </div></div>
</div>
</a>
</li>
In some place i found first find the id of ul in div and refresh the list view
$("#rigth_pane_content_footer").find("#right_ul").listview('refresh');
I tried that also not working.
In my page i am having the following
<div id="rigth_pane_content_footer">
<ul data-role="listview" id="right_ul">
</ul>
</div>
Any suggestions?
try this
$.post('/app/Unit/unit_detail', {item_id : task_id},
function(data){
var container = document.getElementById('right_ul');
var new_element = document.createElement('li');
new_element.innerHTML =data;
container.appendChild(new_element);
$(container).listview("refresh");
});
<div id="menu">
<ul>
<li>Menu link</li>
</ul>
</div>
<div id="content">Dummy content</div>
I want to get the UL tag using parent id.
The condition is if the UL tag is missing, i need to apply new class for the Content Div.
script
document.observe("dom:loaded", function() {
if( --------)
{
$('content').removeClassName('fwidth');
}
else{
$('content').addClassName('fwidth');
}
Thanks
I don't really understand your question, but if you want to find out if <div id="content"> has ul elements, try
if ($('content').down("ul"))