jquery - 1つの親要素の下にあるすべての要素の値を見つける方法は?

Question

私は次のHTMLを持っています。<dl class="item-options">jQuery を使用して、各 HTML 要素の値を1 つの変数で取得したいと考えています。

は<dl class="item-options">、下に異なる値を持つたびにテーブルで複数回生成されています<dl class="item-options">

<dl class="item-options">
        <dd class="truncated" style="color:red;">DSOX3000-232, RS232/UART Serial Decode and Trigger - in <a onclick="return false" class="dots" href="#">...</a>/<div class="truncated_full_value"><dl class="item-options"><dt>Software Applications</dt><dd id="pppp">DSOX3000-232, RS232/UART Serial Decode and Trigger - installed, DSOX3000-AMS, CAN and LIN Automotive Serial Decode - installed, DSOX3000-MAT, Advanced Math Analysis for Infiniivision Oscilloscopes - installed, DSOX3000-VID, Enhanced Video/TV Application Package - installed/</dd></dl></div>
        </dd>          

        <div class="mdata">
            <dd class="truncated">DSOX3000-001, WaveGen 20 MHz Function/Arbitrary Wavefor <a onclick="return false" class="dots" href="#">...</a>/<div class="truncated_full_value"><dl class="item-options"><dt>Advanced Analysis</dt><dd id="pppp">DSOX3000-001, WaveGen 20 MHz Function/Arbitrary Waveform Generator - installed/</dd></dl></div></dd>
        </div>          

        <div class="mdata">
            <dd>DSOX3000-040, Memory Upgrade - 4 Mpts of MegaZoom IV/</dd>
        </div>          

        <div class="mdata">
            <dd class="truncated">DSOX3000-805, Module - LAN/VGA, DSOX3000-806, Module -  <a onclick="return false" class="dots" href="#">...</a>/<div class="truncated_full_value"><dl class="item-options"><dt>Connectivity</dt><dd id="pppp">DSOX3000-805, Module - LAN/VGA, DSOX3000-806, Module - GPIB/</dd></dl></div></dd>
        </div>          

        <div class="mdata">
            <dd class="truncated">DSO0000-903, Power cord - United States and Canada 120V <a onclick="return false" class="dots" href="#">...</a>/<div class="truncated_full_value"><dl class="item-options"><dt>Power Cords</dt><dd id="pppp">DSO0000-903, Power cord - United States and Canada 120V, NEMA 5-15P male plug/</dd></dl></div></dd>
        </div>          

        <div class="mdata">
            <dd class="truncated">DSOX3000-A6J, Certificate of compliance calibration - A <a onclick="return false" class="dots" href="#">...</a>/<div class="truncated_full_value"><dl class="item-options"><dt>Calibration - Upgrade Commercial Calibration Certificate</dt><dd id="pppp">DSOX3000-A6J, Certificate of compliance calibration - ANSI Z540, printed/</dd></dl></div></dd>
        </div>          

        <p style="margin-top:37px"></p>
            <dd>R-50C-021-5, ANSI Z540-1-1994 Calibration - 5 years</dd>
        <p></p>          

        <p style="margin-top:10px"></p>
            <dd>R-51B-001-5F, Return to Agilent Warranty - 5 years</dd><p>
        </p>              
</dl>

次のコードを使用して、下にあるすべての要素の値を選択しています<dl class="item-options">:

$(".item-options").each(function() {    
                description+=$(".mdata").find("*").html();  
});

しかし、すべての値を取得することはできません。これを行う正しい方法は何ですか？

html 形式の値が必要なため、これらの値をポップアップに表示すると、ルック アンド フィールを保持する必要があります。