從孩子添加類，每個家長，每個jQuery和addClass

Question

我有以下的HTML

<div class="blog-posts">  
    <div class="post"><span class="ptype" data-type="article-blog"></span></div> 
    <div class="post"><span class="ptype" data-type="article-snippet"></span></div> 
    <div class="post"><span class="ptype" data-type="article-code"></span></div> 
    <div class="post"><span class="ptype" data-type="article-blog"></span></div> 
</div> 

和下面的CSS類

.post {height:30px;border:2px solid}  
.post.article-blog {background:red} 
.post.article-code {background:blue} 
.post.article-snippet {background:green} 

我想添加到每個後 specifed類由孩子

<span class="ptype" data-type="article-blog"></span> 

我正在使用jquery這樣，但它的理由t採取從第一個孩子班，適用於所有的父母

$(document).ready(function() { 
    $(".post").each(function(index, value) { 
     var ptype = $(".ptype").attr("data-type"); 
     console.log(ptype); 
     $(".post").addClass(ptype); 
    }); 
}); 

任何提示？這裏是一個jsFiddle

這是我想要得到

<div class="blog-posts">  
    <div class="post article-blog"><span class="ptype" data-type="article-blog"></span></div> 
    <div class="post article-snippet"><span class="ptype" data-type="article-snippet"></span></div> 
    <div class="post article-code"><span class="ptype" data-type="article-code"></span></div> 
    <div class="post article-blog"><span class="ptype" data-type="article-blog"></span></div> 
</div> 

Answer 1

有兩個錯誤在你的代碼的HTML：

$(".post").each(function(index, value) { 
    var ptype = $(".ptype").attr("data-type"); // mistake 1 
    console.log(ptype); 
    $(".post").addClass(ptype);    // mistake 2 
}); 

錯誤1：這個選擇器選擇所有.ptype元素。並且您需要.ptype作爲當前.post的子元素。這是可以做到這樣：

var ptype = $(this).find(".ptype").attr("data-type"); 

錯誤2：這個選擇器選擇所有.post元素和應用類給他們。但你只需要目前的.post元素。這又可以this

$(this).addClass(ptype); 

最後完成，正確的代碼是：

$(".post").each(function(index, value) { 
    var ptype = $(this).find(".ptype").attr("data-type"); 
    console.log(ptype); 
    $(this).addClass(ptype); 
}); 

，並簡化：

$(".post").each(function(index, value) { 
    $(this).addClass($(this).find(".ptype").attr("data-type")); 
});