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}

我想在每个帖子中添加由孩子指定的类

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

我正在使用这样的jquery，但它只需要第一个孩子的课程并适用于所有父母

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

任何提示？这是一个jsFiddle

这是我想要的HTML

<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

您的代码中有两个错误：

$(".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" ) );
});

使用jQuery和addClass将子类添加到每个父级

1 个答案: