.each()循环遍历子元素，对比已有元素，避免重复

之前写循环遍历习惯性用 for(){}，可是此次忽然觉着无从下手了。
场景一：左侧九宫格菜单（显示栏），须要遍历获取每一个菜单的id，而后放到数组里。

下面是要遍历的HTML代码：
    <section id="menuGrid" class="menug col-sm-12 ">
        <div class="circlew">
            <div id="Cate101" class="col-sm-4 col-xs-6 circle">
                 <img src="img/wxhtml/kszl.png" />
                 <p>科室信息</p>
                 <span class="glyphicon glyphicon-minus-sign hide"></span>
            </div>
            <div id="Cate102" class="col-sm-4 col-xs-6 circle">
                 <img src="img/wxhtml/kszl.png" />
                 <p>健康知识</p>
                 <span class="glyphicon glyphicon-minus-sign hide"></span>
            </div>
         </div>
    </section

用for循环的时候，得不到想要的效果

for (var i = 0; i < $('#menuGrid .circlew div').length; i++) {
        if ($(this).attr('id') != undefined) {//id为undefined时，substr报错
            console.log('ceshi:' + $(this).attr('id').substr(4));
        }
   }

每一个id都输出了8次，这个地方我就不知道要怎么样用for循环将这些div进行遍历了，真的是基础不牢固吧，请你们指教一下。
下面是我用each()的实现方法。
$(selector).each(function(index,element))：规定为每一个匹配元素规定运行的函数。

$('#menuGrid .circlew div').each(function () {
        console.log($(this).attr('id'));
    })

场景二：点击左侧的加号，出现右侧编辑栏里没有选中的选项，左边移除不想要的选项到了右边，再点击加号，就须要遍历右边已有的全部元素，对比已有的元素，重复的不添加（由于这里作的是点击加号就须要加载一次一开始没有选中的选项）

$('#showMenu .addmenu div').each(function () {
    var RemoveText = $(this).text().trim();//对比的是div的文本内容
    console.log(RemoveText);
    $('#showMenu .addmenu div:contains(' + RemoveText + ')').remove();
})
//这里也涉及到一个我之前没接触过的知识点  :contains 选择器选取包含指定字符串的元素。
//该字符串能够是直接包含在元素中的文本，或者被包含于子元素中。
//$(":contains(text)")

常常与其余元素/选择器一块儿使用，来选择指定的组中包含指定文本的元素
最终效果图：