jQuery 将 find/if 限制为只有一个 div 及其子级答案

【问题标题】：jQuery constrain find/if to just one div and its childrenjQuery 将 find/if 限制为只有一个 div 及其子级
【发布时间】：2011-10-22 02:43:22
【问题描述】：

这个问题很简单，但设置有点复杂。请多多包涵……

我有很多嵌套的 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 中的类变量。

示例

如果源 div 具有类 hue_vals，则应将类 symhue_vals 添加到克隆的 .sksym 细分（仅）。
其他八个变体也是如此：hue_prod 到 symhue_prod、hue_found 到 symhue_found 等。

以下脚本几乎为 hue_vals 执行此操作——除了它似乎在所有 div 中查找 hue_vals 类，而不仅仅是被克隆的那个：

$('.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_？

谢谢！

【问题讨论】：

标签： jquery if-statement find each addclass

【解决方案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();
});

【讨论】：

不错！追加是一种优雅的方法——只要 hue_whatever 是其 div 中 .elbox 之后的第一个类，它就可以工作。但是，我在此处发布的示例有点简化。在我的实时版本中， .elbox div 有几个其他类。看起来您的脚本将“sym”附加到克隆列表中首先出现的任何类。对吗？

【解决方案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('');

});

【讨论】：

克隆工作；但是，我很遗憾地说“symhue_vals”没有写入克隆的 .sksym 类标签。