Question

我有这个HTML，带有两个单独的。parentN元素，其中包含.item。 parent1中的每个项目都包含一个字符串，而parent2中的每个项目都包含相同的字符串，但是它们的顺序混杂在一起。

<div class="parent1">
   <div class="item">Some Text 1</div>
   <div class="item">Some Other Text 123</div>
   <div class="item">Yet another Text 6</div>
   <div class="item">Something else</div>
   <div class="item">Blabla</div>
   ....
</div>

<div class="parent2">      
   <div class="item">
     <span class="title">Blabla</span>
     <span class="ctgr">category 1</span>
   </div>
   <div class="item">
      <span class="title">Yet another Text 6</span>
      <span class="ctgr">category 33</span>
   </div>
   <div class="item">
       <span class="title">Some Text 1</span>
       <span class="ctgr">Cat 12</span>
   </div>
   <div class="item">
       <span class="title">Some Other Text 123</span>
       <span class="ctgr">Lala 12</span>
   </div>   
   <div class="item">
       <span class="title">Something else</span>
       <span class="ctgr">Zaza</span>
   </div>
   ... 
</div>

我想要实现的是：

比较第一个列表中每个项目的字符串和<span class="title">中每个其他字符串，
匹配它们，
如果有一对匹配项，则在第一个列表的每个项目中添加一个data属性，其中包含列表2中相应项目的ctgr字符串。

所以结果将是这样的：

<div class="parent1">
   <div class="item" data-ctgr="Cat 12">Some Text 1</div>
   <div class="item" data-ctgr="Lala">Some Other Text 123</div>
   <div class="item" data-ctgr="category 33">Yet another Text 6</div>
   <div class="item" data-ctgr="Zaza">Something else</div>
   <div class="item" data-ctgr="category 1">Blabla</div>
   ....
</div>

<div class="parent2">      
   <div class="item">
     <span class="title">Blabla</span>
     <span class="ctgr">category 1</span>
   </div>
   <div class="item">
      <span class="title">Yet another Text 6</span>
      <span class="ctgr">category 33</span>
   </div>
   <div class="item">
       <span class="title">Some Text 1</span>
       <span class="ctgr">Cat 12</span>
   </div>
   <div class="item">
       <span class="title">Some Other Text 123</span>
       <span class="ctgr">Lala 12</span>
   </div>   
   <div class="item">
       <span class="title">Something else</span>
       <span class="ctgr">Zaza</span>
   </div>
   ... 
</div>

我知道我需要从两个.each()迭代开始，每个父级都有一个迭代，但是在此之后我不知道如何继续，我需要一些想法来继续。

$('.parent1 .item').each(function() {
   var p1Text = $(this).text();
});

$('.parent2 .item').each(function() {
   var p2Text = $(this).text();
});

谢谢！

Answer 1

您不需要两个循环。您可以通过循环.parent2 .item元素，然后使用filter()来找到文本匹配的.parent1 .item元素，来做到这一点，就像这样：

$('.parent2 .item').each(function() {
  var $item = $(this);
  var title = $item.find('.title').text().trim();
  var ctgr = $item.find('.ctgr').text().trim();
  
  $('.parent1 .item').filter(function() {
    return $(this).text().trim() == title;
  }).data('ctgr', ctgr);
}); 

// for testing only:
$('.parent1 .item').click(function() {
  console.log($(this).data('ctgr'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent1">
   <div class="item">Some Text 1</div>
   <div class="item">Some Other Text 123</div>
   <div class="item">Yet another Text 6</div>
   <div class="item">Something else</div>
   <div class="item">Blabla</div>
</div><br /><br />

<div class="parent2">      
   <div class="item">
     <span class="title">Blabla</span>
     <span class="ctgr">category 1</span>
   </div>
   <div class="item">
      <span class="title">Yet another Text 6</span>
      <span class="ctgr">category 33</span>
   </div>
   <div class="item">
       <span class="title">Some Text 1</span>
       <span class="ctgr">Cat 12</span>
   </div>
   <div class="item">
       <span class="title">Some Other Text 123</span>
       <span class="ctgr">Lala 12</span>
   </div>   
   <div class="item">
       <span class="title">Something else</span>
       <span class="ctgr">Zaza</span>
   </div> 
</div>

如何比较和匹配来自单独元素的字符串？

1 个答案: