检索div中的所有内容,保留div标签

时间:2017-10-25 08:09:31

标签: jquery

我在div内有两个.res_*。我需要检索.res_* div中的所有内容,包括<div>标记。

<div class="res_componente_caminhao_abo_pneu">
  <div class="div1">
    <table class="noselect tbline">
      <thead>
        <tr>
          <th>
            <p class="minatit">ABO</p>
          </th>
          <th>
            <p class="data">15/10/2017</p>
          </th>
        </tr>
      </thead>
    </table>
    <table class="tbfilter noselect" id="filter_componente_caminhao_abo_tremforca">
      <tbody>
        <tr>
          <td class="pointer transition shadbot">MP &lt; 1K</td>
          <td class="pointer transition shadbot">MP &gt; 1K</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="div2">
    <table id="status_componente_caminhao_abo_tremforca">
      <tbody>
        <tr>
          <td class="status transition noselect shad">
            <div class="tbpad"><img src="resources/img/comando.jpg">
              <p class="pblock">Comando final LD</p>
            </div>
            <div class="mpst bgblack">5 alertas</div>
          </td>
          <td class="status transition noselect shad">
            <div class="tbpad"><img src="resources/img/comando.jpg">
              <p class="pblock">Comando final LE</p>
            </div>
            <div class="mpst bgblack">4 alertas</div>
          </td>
          <td class="status transition noselect shad">
            <div class="tbpad"><img src="resources/img/transmissao.png">
              <p class="pblock">Transmissao</p>
            </div>
            <div class="mpst bgblack">2 alertas</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="res_componente_caminhao_abo_tremforca">
  <div class="div1">
    <table class="noselect tbline">
      <thead>
        <tr>
          <th>
            <p class="minatit">ABO</p>
          </th>
          <th>
            <p class="data">15/10/2017</p>
          </th>
        </tr>
      </thead>
    </table>
    <table class="tbfilter noselect" id="filter_componente_caminhao_abo_tremforca">
      <tbody>
        <tr>
          <td class="pointer transition shadbot">MP &lt; 1K</td>
          <td class="pointer transition shadbot">MP &gt; 1K</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="div2">
    <table id="status_componente_caminhao_abo_tremforca">
      <tbody>
        <tr>
          <td class="status transition noselect shad">
            <div class="tbpad"><img src="resources/img/comando.jpg">
              <p class="pblock">Comando final LD</p>
            </div>
            <div class="mpst bgblack">5 alertas</div>
          </td>
          <td class="status transition noselect shad">
            <div class="tbpad"><img src="resources/img/comando.jpg">
              <p class="pblock">Comando final LE</p>
            </div>
            <div class="mpst bgblack">4 alertas</div>
          </td>
          <td class="status transition noselect shad">
            <div class="tbpad"><img src="resources/img/transmissao.png">
              <p class="pblock">Transmissao</p>
            </div>
            <div class="mpst bgblack">2 alertas</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="res_componente_caminhao_cpx_tremforca">
  <div class="div1">
    <table class="noselect tbline">
      <thead>
        <tr>
          <th>
            <p class="minatit">CPX</p>
          </th>
          <th>
            <p class="data">15/10/2017</p>
          </th>
        </tr>
      </thead>
    </table>
    <table class="tbfilter noselect" id="filter_componente_caminhao_abo_tremforca">
      <tbody>
        <tr>
          <td class="pointer transition shadbot">MP &lt; 1K</td>
          <td class="pointer transition shadbot">MP &gt; 1K</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="div2">
    <table id="status_componente_caminhao_abo_tremforca">
      <tbody>
        <tr>
          <td class="status transition noselect shad">
            <div class="tbpad"><img src="resources/img/comando.jpg">
              <p class="pblock">Comando final LD</p>
            </div>
            <div class="mpst bgblack">5 alertas</div>
          </td>
          <td class="status transition noselect shad">
            <div class="tbpad"><img src="resources/img/comando.jpg">
              <p class="pblock">Comando final LE</p>
            </div>
            <div class="mpst bgblack">4 alertas</div>
          </td>
          <td class="status transition noselect shad">
            <div class="tbpad"><img src="resources/img/transmissao.png">
              <p class="pblock">Transmissao</p>
            </div>
            <div class="mpst bgblack">2 alertas</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

JS

var result = [CPX, ABO];

$.each(result, function(i, v) {
    $("#whitebginternal").append("<div id='" + v + "'></div>");
    var test = $("#whitebginternal").find('[class*="res_"] table th p.minatit:contains("' + v + '")').closest('div').html();
    console.log(test)
});
}

我的函数只返回每个结果的第一个表[CPX, ABO],所有<div>标签似乎都消失了。谁知道我哪里出错了?

1 个答案:

答案 0 :(得分:1)

使用get()访问每个jQuery对象下的DOM节点

console.log($( "div" ).get())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="res_componente_caminhao_abo_pneu">
<div class="div1">  <table class="noselect tbline"> <thead> <tr><th><p class="minatit">ABO</p></th><th><p class="data">15/10/2017</p></th> </tr></thead></table><table class="tbfilter noselect" id="filter_componente_caminhao_abo_tremforca"><tbody><tr><td class="pointer transition shadbot">MP &lt; 1K</td><td class="pointer transition shadbot">MP &gt; 1K</td></tr> </tbody></table></div>
<div class="div2"> <table id="status_componente_caminhao_abo_tremforca"><tbody><tr><td class="status transition noselect shad"> <div class="tbpad"><img src="resources/img/comando.jpg"><p class="pblock">Comando final LD</p></div><div class="mpst bgblack">5 alertas</div></td><td class="status transition noselect shad"> <div class="tbpad"><img src="resources/img/comando.jpg"><p class="pblock">Comando final LE</p></div><div class="mpst bgblack">4 alertas</div></td><td class="status transition noselect shad"> <div class="tbpad"><img src="resources/img/transmissao.png"><p class="pblock">Transmissao</p></div><div class="mpst bgblack">2 alertas</div></td></tr></tbody></table></div>
</div>

<div class="res_componente_caminhao_abo_tremforca">
<div class="div1">  <table class="noselect tbline"> <thead> <tr><th><p class="minatit">ABO</p></th><th><p class="data">15/10/2017</p></th> </tr></thead></table><table class="tbfilter noselect" id="filter_componente_caminhao_abo_tremforca"><tbody><tr><td class="pointer transition shadbot">MP &lt; 1K</td><td class="pointer transition shadbot">MP &gt; 1K</td></tr> </tbody></table></div>
<div class="div2"> <table id="status_componente_caminhao_abo_tremforca"><tbody><tr><td class="status transition noselect shad"> <div class="tbpad"><img src="resources/img/comando.jpg"><p class="pblock">Comando final LD</p></div><div class="mpst bgblack">5 alertas</div></td><td class="status transition noselect shad"> <div class="tbpad"><img src="resources/img/comando.jpg"><p class="pblock">Comando final LE</p></div><div class="mpst bgblack">4 alertas</div></td><td class="status transition noselect shad"> <div class="tbpad"><img src="resources/img/transmissao.png"><p class="pblock">Transmissao</p></div><div class="mpst bgblack">2 alertas</div></td></tr></tbody></table></div>
</div>

<div class="res_componente_caminhao_cpx_tremforca">
<div class="div1">  <table class="noselect tbline"> <thead> <tr><th><p class="minatit">CPX</p></th><th><p class="data">15/10/2017</p></th> </tr></thead></table><table class="tbfilter noselect" id="filter_componente_caminhao_abo_tremforca"><tbody><tr><td class="pointer transition shadbot">MP &lt; 1K</td><td class="pointer transition shadbot">MP &gt; 1K</td></tr> </tbody></table></div>
<div class="div2"> <table id="status_componente_caminhao_abo_tremforca"><tbody><tr><td class="status transition noselect shad"> <div class="tbpad"><img src="resources/img/comando.jpg"><p class="pblock">Comando final LD</p></div><div class="mpst bgblack">5 alertas</div></td><td class="status transition noselect shad"> <div class="tbpad"><img src="resources/img/comando.jpg"><p class="pblock">Comando final LE</p></div><div class="mpst bgblack">4 alertas</div></td><td class="status transition noselect shad"> <div class="tbpad"><img src="resources/img/transmissao.png"><p class="pblock">Transmissao</p></div><div class="mpst bgblack">2 alertas</div></td></tr></tbody></table></div>
</div>