jQuery 将 find/if 限制为仅一个 div 及其子元素

Question

这个问题很简单，但是设置有点复杂。请耐心等待...

我有一个很大的嵌套 div 列表，如下所示：

<div id="ptosTable">

 <div class="elbox hue_vals">
  <a class="symtype1" href="#">
   <div class="sksym">E</div>
  </a>
 </div>

 <div class="elbox hue_domain">
  <a class="symtype1" href="#">
   <div class="sksym">L</div>
  </a>
 </div>

 <!-- ...plus 100 more just like these -->
</div>

还有一个现有脚本将每个 div (.elbox) 克隆到完全不同的 div (#pinsets ）悬停时。 [见下文。]

现在，对于每个克隆，我还想向克隆 div 添加一个 css 类（仅），依赖于源 div 中的类变量。

示例

1. 如果源 div 具有类 hue_vals，则应将类 symhue_vals 添加到 .sksym > 克隆的子 div（仅）。

2. 其他八个变体也是如此：hue_prod 到 symhue_prod、hue_found 到 symhue_found 等。

以下脚本几乎对 hue_vals 执行此操作 ---只不过它似乎在所有 div 中查找 hue_vals 类，而不仅仅是正在克隆的 div

$('.elbox').hover(function() {
 $(this).clone().appendTo('#pinsets');

     // next three lines add the new class
 $(this).each(function(i) {
  if($('.hue_vals')){
   $('#pinsets .sksym').addClass('symhue_vals');
  }
 });

 $('#pinsets').show();
}, function() {
 $('#pinsets').hide();
 $('#pinsets').html('');
});

结果是 symhue_vals 被添加到每个克隆的 .sksym div，无论源 div 是否有 hue_vals 类。

所以我想我的问题（最后！）是：如何限制脚本在正在克隆的 div 中查找 hue_whatever _only_ ？

谢谢你！

Answer 1

var $clone;
$('.elbox').hover(function() {
    $clone = $(this).clone();
    var cls = $.trim($clone.attr('class').replace('elbox', ''));
    $('.sksym', $clone).addClass('sym' + cls + '');
    $clone.appendTo('#pinsets');
    $('#pinsets').show();
},
function() {
    $('#pinsets').empty().hide();
});

Answer 2

试试这个

var $clone;
$('.elbox').hover(function() {
  $clone = $(this).clone()
  $clone.appendTo('#pinsets');

     // next three lines add the new class
 $(this).each(function(i) {
  if($('.hue_vals', $clone).length){
     $('#pinsets .sksym').addClass('symhue_vals');
  }
 });

  $('#pinsets').show();

}, function() {

  $('#pinsets').hide().html('');

});