.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)")

常常與其餘元素/選擇器一塊兒使用，來選擇指定的組中包含指定文本的元素
最終效果圖：