CODEWITHSUNDEEP
javascriptjqueryhtml
trallallalloo
trallallalloo

Reputation: 602

How to append unique element of div to another div

I have 2 div like <div id="destination" runat="server"></div> and <div class="errorDiv"></div>

I write a jquery function 

 $(document).each(function () {
            if ($("#destination").find("div").html() !== $(".errorDiv").html()) {
                $("#destination").append($(".errorDiv"));
                $("#error").append($("#destination"));
            }
        }).change();

In this function, if destination div contains errorDiv content skips, else append to destination. Then destination will append to another div. But, my check doesn't work . How can I append only unique elements of div? errorDiv content is produced in ASP page and this content is generic.

While page is running I catch the some error messages and I want to append something about these messages to destination div. for example; if I catch 

 <div class="errorDiv">A</div>
 <div class="errorDiv">A</div>
 <div class="errorDiv">B</div>
 <div class="errorDiv">B</div>
 <div class="errorDiv">A</div>
 <div class="errorDiv">C</div>

contents I want to append only 

 <div class="errorDiv">A</div>
 <div class="errorDiv">B</div>
 <div class="errorDiv">C</div>

divs to destination div.

But with my function, all divs are appended.

Upvotes: 0

Views: 1487

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074335

So it sounds like you get new .errorDivs and want to add them to #destination only if equivalent text isn't already there.

To do that, you need to loop through the divs in #destination, rather than just looking at the HTML of the first one. See comments:

$(document).each(function() {   // <== Calling .each on $(document) makes no sense
    // Get an array of the currently-known errors in destination
    var errors = $("#destination div").map(function() {
        return $(this).html();
    }).get();

    // Loop through the "new" errors
    $(".errorDiv").each(function() {
        // Is the text of this error already in the destination?
        if ($.inArray($(this).html(), errors) == -1) {
            // No, add it
            $("#destination").append(this);
            $("#error").append($("#destination")); // <== This seems very strange
        }
    }
}).change();                   // <== Triggering the change event on document seems odd

Upvotes: 4

Related Questions