insertBefore處理該類的所有實例，儘管如此

Question

請檢查我的小提琴;

http://jsfiddle.net/bazzle/sfcx0xvb/

我如何只與特定的類名的元素中的功能的工作？

我想，每個人都這樣做，但它似乎沒有。

由於.image-block在.text-block的所有實例之前插入，而不僅僅是在article.alt中，您可以在小提琴中看到。

謝謝！

HTML

<article> 
<div class="image-block"> 
    <img src="http://stwww.bikemag.com/files/2013/04/KONA-7145.jpg" alt="Kona" /> 
</div><div class="text-block"> 
<p> 
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</p> 
</div> 
</article> 


<article class="alt"> 
<div class="image-block"> 
    <img src="http://www.bikemag.com/files/2013/04/KONA-7145.jpg" alt="Kona" /> 
</div><div class="text-block"> 
<p> 
    in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</p> 
</div> 
</article> 

CSS

article{ 
width:100%; 
margin-bottom:1em; 
} 

.image-block, .text-block{ 
display:block; 
position:relative; 
display:inline-block; 
width:49% 
} 

.text-block{ 
vertical-align:top; 
padding:1%; 
} 

img{ 
width:100% 
} 

JS：

$('article.alt').each(function(){ 
    $(this).find('.image-block').insertBefore('.text-block'); 
}); 

Answer 1

它。問題是，你正在失去insertBefore選擇器的上下文，該選擇器不會被告知查看當前的this元素的上下文，而是查看整個DOM。相反：

$(this).find('.image-block').insertBefore($(this).find('.text-block'));