Home › Forums › JavaScript › [Solved] Add Class to Parent if Checkbox is Checked
- This topic is empty.
-
AuthorPosts
-
December 19, 2011 at 9:59 pm #35703
Taufik Nurrohman
Participant@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:December 19, 2011 at 10:35 pm #93106Mottie
Membero.O
What checkbox? and what sortable?
December 19, 2011 at 10:56 pm #93108December 20, 2011 at 10:36 am #93129Mottie
MemberIf I am understanding your question, you could just replace the text:
realContent = $('.sortable').html().replace('', '');
December 20, 2011 at 10:48 pm #93156Mottie
MemberOk, 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('');
});December 21, 2011 at 9:40 am #93175Mottie
MemberCatnip… 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(/?(br|ol|ul|li)>/g, function(m){
return {
'
' : 'nn',
'- ' : '
- 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.
December 24, 2011 at 3:25 am #93324Mottie
MemberHey… 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.
December 24, 2011 at 9:46 am #93333Mottie
Memberhttp://jsfiddle.net/Mottie/3DMue/25/
Merry Christmas
December 26, 2011 at 9:21 pm #93410Mottie
MemberWhen 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.
December 27, 2011 at 1:18 am #93421Mottie
MemberYou’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();
});December 28, 2011 at 9:49 am #93529Mottie
MemberYou’re killing me man!…
Try using
.live("click", function(){
instead of.click(function(){
, because the list items don’t exist until you add them.December 28, 2011 at 9:53 pm #93589Mottie
Member$(this).parent().prev().remove();
December 29, 2011 at 9:03 am #93607Mottie
MemberPlease, don’t fix stuff that isn’t broken.
December 30, 2011 at 9:09 am #93709Mottie
MemberThis 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.January 1, 2012 at 11:22 pm #93838joshuanhibbert
Member@Hompimpa I’m getting all sorts of malware warnings when attempting to view that site.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.