如何使用jQuery遍历HTML元素和JSON？

Question

I'm trying to loop through all elements with the class name steem_verify, and then append " Verified" after the usernames who are verified according to my API. I finally got it working (kind of), but after verified names it says " Verified Verified Verified", so I'm guessing my loop is messed up somewhere.

Here's my code:

$.getJSON("https://steemverify.com/api/verified.json", function (data) {
    $.each(data, function (i, item) {
        $(".steem_verify").each(function (index) {
            var username = $(this).text();
            $(data).each(function () {
                if (item.username == username) {
                    $(".steem_verify")[index].append(" Verified");
                }
            });
        });
    });
});

Answer 1

simply no need for first loop

 $.getJSON("https://steemverify.com/api/verified.json", function (data) { //$.each(data, function (i, item) { //alert(item.username); $(".steem_verify").each(function (index) { var username = $(this).text(); $(data).each(function ( i , item) { if (item.username == username) { $(".steem_verify")[index].append(" Verified"); } }); }); //}); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="steem_verify">dalt</div> <div class="steem_verify">steemitqa</div> <div class="steem_verify">steemverify</div> 

in another way you need just one loop and use .filter() so your code will looks simple like this

 $.getJSON("https://steemverify.com/api/verified.json", function (data) { $.each(data, function (i, item) { $(".steem_verify").filter(function(){return item.username == $(this).text() }).append(" Verified"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="steem_verify">dalt</div> <div class="steem_verify">steemitqa</div> <div class="steem_verify">steemverify</div> 

Answer 2

Solution by OP.

This code works:

$.getJSON("https://steemverify.com/api/verified.json", function (data) {
    $.each(data, function (i, item) {
        $(".steem_verify").each(function (index) {
            var username = $(this).text();
            if (item.username === username) {
                $(".steem_verify")[index].append(" Verified");
            }
        });
    });
});