Javascript 如何在jquery中重新绘制逻辑？

我有一个如下所示的div结构

<div id-"itemsRows">
  <ul id="row1">
          <input type="hidden" id="hfId" value="1" />
        <input type="hidden" id="hfOrd" value="2" />
        <input type="hidden" id="hfDate" value="3" />
       <li class="popup"> <div id="p1"></div> <div id="p2"></div></li>
  </ul>
 <ul id="row2">
       <input type="hidden" id="hfId" value="4" />
        <input type="hidden" id="hfOrd" value="5" />
        <input type="hidden" id="hfDate" value="6" />
       <li class="popup"> <div id="p2"></div> <div id="p2"></div> </li>
  </ul>
 <ul id="row3">
       <input type="hidden" id="hfId" value="2" />
        <input type="hidden" id="hfOrd" value="3" />
        <input type="hidden" id="hfDate" value="4" />
       <li class="popup"> <div id="p3"></div> <div id="p3"></div></li>
  </ul>
</div>

现在我有一个通过ajax调用得到的html，如下所示

<ul id="ajaxrows">
<li>
  <input type="hidden" id="hfId" value="1" />
            <input type="hidden" id="hfOrd" value="2" />
            <input type="hidden" id="hfDate" value="3" />
  <div id="p11"></div> <div id="p12"></div>
</li>
<ul>
<ul id="ajaxrows">
<li>
      <input type="hidden" id="hfId" value="4" />
            <input type="hidden" id="hfOrd" value="5" />
            <input type="hidden" id="hfDate" value="6" />
  <div id="p22"></div> <div id="p32"></div>
</li>
<ul>

---

现在我必须比较这两个结构并匹配所有hiddenfield值。如果所有三个匹配，我必须用ajaxrows的div替换UL row1中的两个div。。你知道如何在jquery中实现这一点吗？

这应该给你一个开始

$('#itemsRows ul').each(function () { // go thru row uls
    var $this = $(this);

    var rows_arr = $(this).find('input').map(function () { // create an array with the input
        return this.value;
    }).get();

    $('#wrap-ajax ul').each(function () { // I wrapped this in a div to better loop it
        var ajx_arr = $(this).find('input').map(function () {
            return this.value;
        }).get();

        if (rows_arr.toString() === ajx_arr.toString()) { // lazy meh way to compare arrays
            console.log(rows_arr, ajx_arr);
            $(this).find('div').appendTo($this.find('li.popup').empty()); // delete the old and put the new
        }

    });

});

---

我假设块的数量相同，并且每个块中的输入数量具有相同的计数

 $($("#itemsRows ul")).each(function( index ){   
        var ajaxResult = $($("#ajaxrows li"))[index];
        var count =0;
        $($(this).find("input")).each(function( index2 ){
            var res = $(ajaxResult).find("input")[index2];
            if($(this).val() ==  $(res).val()){
                count++;
            }
        });


        var ajaxResultDivs = $($("#ajaxrows li")[index]).find("div");
        if(count == $(this).find("input").length){
             $($(this).find("div")).each(function( index ){   
               $(this).replaceWith($(ajaxResultDivs));              
            });
        }                        

    });

console.log($("#itemsRows"));

---

请考虑发布您自己的尝试，如果有的话……我希望您复制粘贴，ID的一次又一次实际上不一样。我的想法是从元素中使用

索引

，并比较values@spokey只是为了理解，我只使用索引。。您能为这个场景提供一个解决方案吗？值是否总是数字？在html和ajax结果中，每个块中的输入数将是相同的？