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

时间:2013-04-24 13:04:53

标签: jquery html

我有以下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(); }); 下的所有元素值:

{{1}}

但是我无法获取所有值。这样做的正确方法是什么?

我想要html格式的值,所以当我在弹出窗口中显示这些值时,应该保持外观。

2 个答案:

答案 0 :(得分:2)

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

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

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

答案 1 :(得分:1)

使用children()

尝试

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