dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Update display style for output element which has been populated using .append in jqu

  1. #1
    Join Date
    Feb 2014
    Posts
    6

    Update display style for output element which has been populated using .append in jqu

    I have output form element defined as

    <ul>
    <li><output id="xydata" name="guessedList"/></li>
    </ul>

    I am populating this with

    x=$("form").serializeArray();
    $.each(x, function(i, field){
    $("#xydata").append("<p>" + field.value + "</p>");
    });

    The output displays correctly.
    Now I need to display the alternate elements with a different color or with different background, which is not working as expected. I tried the following, but did not succeed
    x=$("form").serializeArray();
    $.each(x, function(i, field){
    $("#xydata").append("<p>" + field.value + "</p>");
    $("ul#xydatalidd").not('.odd').addClass("bottomNote");
    $( this ).addClass( "bottomNote" );
    });

    In the CSS I have
    .bottomNote{ padding:3px 5px 2px 10px; color:#BB0000; clear:both; display:block; }

    Any suggestions/pointers on how I can go about it?

    Thanks much

  2. #2
    Join Date
    Feb 2014
    Posts
    6
    Sorry, a typo in my original post:

    I have output form element defined as

    <ul>
    <li><output id="xydata" name="xydata"/></li>
    </ul>

    I am populating this with

    x=$("form").serializeArray();
    $.each(x, function(i, field){
    $("#xydata").append("<p>" + field.value + "</p>");
    });

    The output displays correctly.
    Now I need to display the alternate elements with a different color or with different background, which is not working as expected. I tried the following, but did not succeed
    x=$("form").serializeArray();
    $.each(x, function(i, field){
    $("#xydata").append("<p>" + field.value + "</p>");
    $("ul#xydatalidd").not('.odd').addClass("bottomNote");
    $( this ).addClass( "bottomNote" );
    });

    In the CSS I have
    .bottomNote{ padding:3px 5px 2px 10px; color:#BB0000; clear:both; display:block; }

    Any suggestions/pointers on how I can go about it?

    Thanks much

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles