我如何通过Ajax解析HTML

Question

You want to extract from the html:

$(function() {
  $.ajax({
    url: "/echo/html/",
    dataType: "html",
    success: function(data) {
      $('#name').html($(data).find('tbody tr td').text());
      $('#width').html($(data).find('nobr').text());
    },
    type: 'POST',
    data: {
      html: '<table width="100%" class="vote-answer-table"><tbody><tr><td width="24%" style="">Гранд-смета&nbsp;</td><td><div class="vote-answer-bar" style="width:80%;background-color:#1288A0"></div><span class="vote-answer-counter"><nobr>&nbsp;12 (63%)</nobr></span></td></tr><tr><td width="24%" style="">Визард (SmetaWizard)&nbsp;</td><td><div class="vote-answer-bar" style="width:14%;background-color:#993399"></div><span class="vote-answer-counter"><nobr>&nbsp;2 (11%)</nobr></span></td></tr><tr><td width="24%" style="">Смета.ру&nbsp;</td><td><div class="vote-answer-bar" style="width:14%;background-color:#990033"></div><span class="vote-answer-counter"><nobr>&nbsp;2 (11%)</nobr></span></td></tr><tr><td width="24%" style="">DefSmeta&nbsp;</td><td><div class="vote-answer-bar" style="width:6%;background-color:#CC3300"></div><span class="vote-answer-counter"><nobr>&nbsp;1 (5%)</nobr></span></td></tr><tr><td width="24%" style="">Гектор-сметчик&nbsp;</td><td><div class="vote-answer-bar" style="width:6%;background-color:#CCCC00"></div><span class="vote-answer-counter"><nobr>&nbsp;1 (5%)</nobr></span></td></tr><tr><td width="24%" style="">РИК (WinRik)&nbsp;</td><td><div class="vote-answer-bar" style="width:6%;background-color:#73E600"></div><span class="vote-answer-counter"><nobr>&nbsp;1 (5%)</nobr></span></td></tr><tr><td width="24%" style="">Госстройсмета&nbsp;</td><td><div class="vote-answer-bar" style="width:0%;background-color:#00AA00"></div><span class="vote-answer-counter"><nobr>0 (0%)</nobr></span></td></tr><tr><td width="24%" style="">Турбосметчик&nbsp;</td><td><div class="vote-answer-bar" style="width:0%;background-color:#33FFCC"></div><span class="vote-answer-counter"><nobr>0 (0%)</nobr></span></td></tr><tr><td width="24%" style="">Смета-Багира&nbsp;</td><td><div class="vote-answer-bar" style="width:0%;background-color:#3399CC"></div><span class="vote-answer-counter"><nobr>0 (0%)</nobr></span></td></tr><tr><td width="24%" style="">АВС&nbsp;</td><td><div class="vote-answer-bar" style="width:0%;background-color:#3333CC"></div><span class="vote-answer-counter"><nobr>0 (0%)</nobr></span></td></tr></tbody></table>',
      delay: 1
    }
  });
});

p {
  border: 1px solid red;
}

<p id="name">No data found!</p>
<p id="width">No data found!</p>

first:

Гранд-смета Визард (SmetaWizard) Смета.ру DefSmeta Гектор-сметчик РИК (WinRik) Госстройсмета Турбосметчик Смета-Багира АВС

second:

12 2 2 1 1 1 0 0 0 0

For example, elements can be wrapped in this form:

<em>Гранд-смета</em><span>12</span>
<em>Визард (SmetaWizard)</em><span>2</span>
<em>Смета.ру</em><span>2</span>
<em>DefSmeta</em><span>1</span>
<em>Гектор-сметчик</em>1<span></span>
<em>РИК (WinRik)</em><span>1</span>
<em>Госстройсмета</em><span>0</span>
<em>Турбосметчик</em><span>0</span>
<em>Смета-Багира</em><span>0</span>
<em>АВС</em><span>0</span>

</div>

Answer 1

You can loop over each tr element and use find with eq() to get the text values from the required td cells. Try this:

var $output = $('#output');
$('table tr').each(function() {
    var $row = $(this);
    $('<em />', { text: $row.find('td:eq(0)').text() }).appendTo($output);
    $('<span />', { text: parseInt($row.find('td:eq(1)').text().trim(), 10) }).appendTo($output);
    $('<br />').appendTo($output);
});

Example fiddle