如何找到一个父元素下每个元素的值？

Question

我有下面的HTML。使用jQuery，我希望在一个变量中获得<dl class="item-options">下每个HTML元素的值。

在表中多次生成<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格式的值，所以当我在popup.It中显示这些值时，应该保留外观。

Answer 1

您的代码不起作用，因为您在每次迭代中选择相同的元素。如果需要文本内容，可以使用jQuery text方法或textContent属性。

var text = $(".item-options").children().map(function() {
       return $(this).text(); 
}).get().join('');

map方法返回一个数组，您可以使用数组对象的join方法将其转换为字符串。

Answer 2

使用children()

试试这些

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