Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript [Solved] Add Class to Parent if Checkbox is Checked

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #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:

    http://jsfiddle.net/uH8Ez/

    #93106
    Mottie
    Member

    o.O

    What checkbox? and what sortable?

    #93108
    Mottie
    Member

    DUH… LOL… ok try this demo

    #93129
    Mottie
    Member

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

    realContent = $('.sortable').html().replace('', '');
    #93156
    Mottie
    Member

    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('');
    });
    #93175
    Mottie
    Member

    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.

    #93324
    Mottie
    Member

    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.

    #93333
    Mottie
    Member
    #93410
    Mottie
    Member

    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.

    #93421
    Mottie
    Member

    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();
    });
    #93529
    Mottie
    Member

    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.

    #93589
    Mottie
    Member

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

    #93607
    Mottie
    Member

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

    #93709
    Mottie
    Member

    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.

    #93838

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

Viewing 15 posts - 1 through 15 (of 17 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.