Home › Forums › JavaScript › [Solved] Add Class to Parent if Checkbox is Checked
- This topic is empty.
-
AuthorPosts
-
December 19, 2011 at 9:59 pm #35703Taufik NurrohmanParticipant
@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 #93106MottieMembero.O
What checkbox? and what sortable?
December 19, 2011 at 10:56 pm #93108December 20, 2011 at 10:36 am #93129MottieMemberIf I am understanding your question, you could just replace the text:
realContent = $('.sortable').html().replace('', '');
December 20, 2011 at 10:48 pm #93156MottieMemberOk, 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 #93175MottieMemberCatnip… 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 #93324MottieMemberHey… 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 #93333MottieMemberhttp://jsfiddle.net/Mottie/3DMue/25/
Merry Christmas
December 26, 2011 at 9:21 pm #93410MottieMemberWhen 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 #93421MottieMemberYou’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 #93529MottieMemberYou’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 #93589MottieMember$(this).parent().prev().remove();
December 29, 2011 at 9:03 am #93607MottieMemberPlease, don’t fix stuff that isn’t broken.
December 30, 2011 at 9:09 am #93709MottieMemberThis 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 #93838joshuanhibbertMember@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.