[Solved] Add Class to Parent if Checkbox is Checked

[Taufik Nurrohman]

@Mottie… (or anyone who first saw it). How do I add a class in the parent element only if the checkbox inside is checked. I want the .sortable element become yellow if checkbox is checked:

http://jsfiddle.net/uH8Ez/

[Mottie]

o.O

What checkbox? and what sortable?

[Mottie]

DUH… LOL… ok try this demo

[Mottie]

If I am understanding your question, you could just replace the text:

realContent = $('.sortable').html().replace('', '');

[Mottie]

Ok, I understand now… try this (demo):

$('button#generate').click(function() {

var realContent = $('#area').clone();

realContent.find('input').remove();

realContent.find('.sortable').children().unwrap();

var thecode = realContent.html();

$('#thecode').text(thecode);

$('#thecode').dialog({

show: "fade",

hide: "explode"

});

$('#area').html('');

});

[Mottie]

Catnip… nuff said.

Try this (demo)

    $('button#generate').click(function() {

var realContent = $('#area').clone();

realContent.find('input').remove();

realContent.find('.sortable').children().unwrap().after('
');

var thecode = realContent.html()

.replace(//g, function(m){

return {

'
'  : 'nn',

'
'  : '
n',

'
' : 'n',

'
'  : '
n',

'
' : 'n',

'
'  : '  
',

'
' : 'n'

}[m]});

$('#thecode').val(thecode);

$('#thecode').dialog({

show: "fade",

hide: "explode"

});

$('#area').html('');

});

I changed the code div to a textarea and added a bit of formatting… I originally had a “t” in front of the LI’s but it added too much indentation, so I switched it to two spaces.

[Mottie]

Hey… umm what do you mean by almost solved? And I’m not sure I understand what you mean by “when the elements dragged, the generated codes mess again!”. I moved the elements around and the code seemed to be fine to me.

[Mottie]

http://jsfiddle.net/Mottie/3DMue/25/

Merry Christmas

[Mottie]

When I add a new paragraph, it looks exactly the same as the other ones already in there… which browser are you using? I just checked it on Firefox and Chrome.

I’m a perfectionist too (a lazy one really), but it sounds like you might be running into a css problem.

[Mottie]

You’re killing me! LOL

Actually I had that fixed way back about 10 versions ago, but it didn’t get copied over or got removed in one of your updates. All it needed was the trim function seen below (demo)

    $('button#addParagraph').click(function() {

var paragraph = $('textarea#pg').val();

$('#area').append('
' + $.trim(paragraph) + '
');

removing();

});

[Mottie]

You’re killing me man!…

Try using .live("click", function(){ instead of .click(function(){, because the list items don’t exist until you add them.

[Mottie]

$(this).parent().prev().remove();

[Mottie]

Please, don’t fix stuff that isn’t broken.

[Mottie]

This code: $(this).parent().length points to the parent of the link, which is the LI. Try this (demo):

$(this).parent().siblings().length;

Or this would work too, but a bit more messy

$(this).parent().parent().find('li').length;

It uses .parent().parent() instead of .closest('ul,ol') since I’m not sure it works and I’m too lazy to test it.

[joshuanhibbert]

@Hompimpa I’m getting all sorts of malware warnings when attempting to view that site.

[Author]

Posts