У меня есть некоторые div с уникальными идентификаторами и одним классом mbox
. Эти divs содержат некоторую информацию. В нижней части каждого div у меня есть div с тем же классом для всех removeme
.
Как это возможно, когда я removeme
div с классом removeme
чтобы вывести div с помощью класса mbox
? Но только mbox
а не другой рядом с ним
Мой Html:
<style>
.mbox{
width:300px;
height:280px;
float:left;
margin-left:5px;
margin-right:10px;
margin-bottom:10px;
background-color: #E0E0E0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px solid #CACACA;
}
.removeme{
width:200px; height:45px; float:left; background-color: #F00;
}
.title{
width:290px;
float:left;
margin-left:5px;
margin-top:5px;
text-align:center;
color:#333;
font-family:Verdana, Geneva, sans-serif;
font-size:24px;
font-weight:bold;
}
.photoholder{
width:200px;
height:150px;
float:left;
margin-left:50px;
margin-top:8px;
background-color:#FFF;
}
.imgclass{
float:left;
margin-left:10px;
margin-top:5px;
}
</style>
<div class="mbox" id="1">
<div class="title">Hello Box</div>
<div class="photoholder">
<img class="imgclass" src="http://whomurderedrobertwone.com/wp-content/uploads/2010/06/BigStarlitSky-300x250.jpg" width="180" height="140">
</div>
<div style="width:200px; height:45px; float:left; margin-top:12px; margin-left:50px; cursor:pointer;">
<div class="removeme"></div>
</div>
</div>
<div class="mbox" id="2">
<div class="title">Hello Box</div>
<div class="photoholder">
<img class="imgclass" src="http://whomurderedrobertwone.com/wp-content/uploads/2010/06/BigStarlitSky-300x250.jpg" width="180" height="140">
</div>
<div style="width:200px; height:45px; float:left; margin-top:12px; margin-left:50px; cursor:pointer;">
<div class="removeme"></div>
</div>
</div>
<script type="text/javascript">
$('.removeme').click(function () {
$(this).fadeOut("fast");
});
</script>
Проверьте мою демонстрацию: http://jsfiddle.net/fWtm6/9/
Вы можете использовать .parent()
для получения родительского элемента (в этом случае вам нужно 2, чтобы получить родительский .mbox
$('.removeme').click(function () {
$(this).parent().parent().fadeOut();
});
EDIT: после второго взгляда на jQuery API .parents()
будет лучшей идеей, поскольку она пересекает все родительские элементы, чтобы вы могли явно отфильтровывать элементы по классам или идентификатору независимо от того, насколько далеко он находится вверх по дереву
$('.removeme').click(function () {
$(this).parents('.mbox').fadeOut();
});
Попробуйте это, надеюсь, он ответит на ваш вопрос..
$('.removeme').click(function () {
var str=$(this).parent().closest(".mbox");
$(str).fadeOut("fast");
});
Заменить эту строку
$(this).fadeOut("fast");
с этим
$(this).closest('.mbox').fadeOut("fast");