javascript - jQuery after() には競合状態があるようです

Question

非常に奇妙なバグがあります。競合状態のように見えるものにより、width();呼び出しが異なる結果になります。

私は呼び出し後にこのjQueryを持っています:

this.after(
    "<div class='menuItemContainer'>" +
        "<div class='menuItemTitle'>" +
            $("option:selected", this).text() + "<span class='menuItemDownArrow'>&#9660;</span>" +
        "</div>" +
        "<div class='menuItemList'>" +
        selectionMarkup +
        "</div>" +
    "</div>"
);

html を DOM に挿入します。

次に、要素とクラスを合わせた幅を把握し、menuItemColumsその親 div をその幅にする必要があります。

このマークアップは変数に存在しますselectionMarkup。

これを行うには、次のことを行います。

var w = 0;
$(".menuItemColumn").each(function(){
    w += $(this).width();
    console.log($(this));
    console.log(w);
});
$(".menuItemList").css({
    width: w}
);

これは、約 70% の確率で期待どおりに機能しますが、一部の要素で間違った測定値を取得することもあれば、少なくとも最初の測定値が間違っていることもあります。

奇妙な部分は、オブジェクトが正しいように見え、そのプロパティは正しい幅ですが、widht()割り当てられている指定wが正しくないことです:

その画像は、ロギングの結果を明確にするために示しており、w幅プロパティが正しいように見えるため$(this)、どちらが同じである必要があります。$(this)

私はデバッグを続け、これが競合状態であると信じるようになる 2 つのことを発見しました。

最後に投稿したコードを再度実行すると、バグが再現され、問題が修正されます。

次の呼び出しを行うと、異なる結果が得られます。一方は正しくなく、もう一方 (2 つ目) は正しいです。

console.log($(".menuItemColumn:first").width());
setTimeout(function(){console.log($(".menuItemColumn:first").width());},3000);

コードの 2 番目の部分は、最初の部分が完了するまで実行されないという印象を受けました。

注: 競合状態が私が探していた単語であるかどうかは 100% 確信が持てませんが、それでも、アイデアはそれです。

---

アップデート：

@WereWolf-TheAlpha コンソールの出力が jquery オブジェクトのように見えないため、それを再現できず、これしか得られません。

コードを変更せずに。