如何引用子元素jQuery的

我知道这是很简单的问题，但是我无法找到一个解决办法。我有以下的div结构..如何引用子元素jQuery的

<div id="myid"> 
    <div id="toggle"> 
    <img id="img" src="test_img.jpg" width="300" height="200"> 
    </div> 
</div> 

<script> 
$("#myid").mouseenter(function() { 
$("#toggle").css("background-image", "url(test_img_b.jpg)"); 
$('#myid').children().animate({width: "0px", marginLeft: 0, opacity:0}, 'slow', function() {$(this).remove();}); 
}); 
</script>

的代码工作正常，问题是我不想通过名称引用“#toggle”div，我想通过儿童财产或类似的东西访问。因为我将成为具有“#myid”的div许多块，并要取决于“#toggle”格动画上的div盘旋......

我希望我做了清楚我的问题。

谢谢 - Malind

谢谢大家，我已经按照以下你的建议改变了我的范围和取得的成绩我想摆在首位。

问候 Malind

来源

2014-01-30 Malin Dharmaratne

“许多块“#myid”divs“......这是不对的，你应该有唯一的id。如果你想引用多个'div's，使用类 – tewathia

使用类名称，而不是ID值，以便可以在同一文档中重复相同结构的许多倍。然后，当一个事件处理程序火灾，使用'$（本）'和'.closest一起（“XXX‘）'或'.find（’XXX”）'找到触发该事件的元素上方或下方的项目。 – jfriend00

试试这个：

$("#myid div")

是适用于所有的div #mydiv

内但真正你接近它错了。你只能有一个唯一的ID，但只能有多个类。所以选择类，而不是id。

<div class="parent" id="myid"> 
    <div class="toggle"> 
    <img id="img" src="test_img.jpg" width="300" height="200"> 
    </div> 
</div> 

<script> 

$("#myid").mouseenter(function() { 
    var $this = $(this); 
    $('.toggle', $this) //here you are setting the scope to the div you are entering 
     .css("background-image", "url(test_img_b.jpg)") 
     .animate({ 
      width: "0px", 
      marginLeft: 0, 
      opacity:0 
     }, 'slow'); 
}), function() { 
    var $this = $(this); 
    $('.toggle', $this) 
     .animate({ 
      width: "0px", 
      marginLeft: 0, 
      opacity:0 
     }, 'slow', function() { 
      $(this).remove(); 
    }); 
}); 
</script>

你可以做$（“＃身份识别码”）。找到（“切换”），但它的效率不高，你应该先定义你的范围，然后再应用它。 var $ id = $（'＃myid'）; $（'。toggle'，$ id），然后你的范围可以反复使用，而无需反复使用.find（）。

来源

2014-01-30 06:02:22

Id元素必须是唯一的，所以你不能有相同ID的多个元素 - 使用类，而不是

<div class="myid"> 
    <div class="toggle"> 
    <img class="img" src="test_img.jpg" width="300" height="200"> 
    </div> 
</div>

然后

$(".myid").mouseenter(function() { 
    $(this).find(".toggle").css("background-image", "url(test_img_b.jpg)"); 
    $(this).find('.img').animate({ 
     width: "0px", 
     marginLeft: 0, 
     opacity: 0 
    }, 'slow', function() { 
     $(this).remove(); 
    }); 
});

演示：Fiddle

来源

2014-01-30 06:03:58

如何引用子元素jQuery的

回答

相关问题