从孩子添加类，每个家长，每个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")); 
});