Добавить класс к элементу с атрибутом

Question

Ok динамически добавленные данные, поэтому у меня есть HTML-файл, который выглядит примерно так:

while($stuff = $junk->fetch()){ ?> 
    <div class="top-div" data-place-id="<?php echo $place['id']; ?>"></div> 
    <div> 
     <article> 
      <div> 
       //some stuff 
      </div> 
      <div> 
       <span class="expand" data-place-id="<?php echo $place['id']; ?>"></span> 
      </div> 
     </article> 
    </div> 
} ?> 

Как вы можете видеть, для каждого результата из базы данных, структуру, как это выводится. Естественно, каждый раз будет по крайней мере несколько из них. Я хочу сделать так, что каждый раз, когда щелкнут span, класс добавляется к <div data-place-id="">, где идентификатор данных совпадает с щелчком.

Я пытался делать это так:

expandOverlay = function(){ 
    $(".expand").each(function(){ 
     $(".top-div").addClass('is-expanded'); 
    }) 
}) 

Но это только добавляет класс к каждому элементу с этим классом. Тогда я попытался это:

expandOverlay = function(){ 
    $(".expand").each('click', function(){ 
     var dataAttr = $(this).data(); 
     if($(".place-overlay").data() == dataAttr){ 
      $(this).addClass("is-expanded); 
     } 
    }) 
}); 

Но это не сработало.

Итак, как я могу получить .data() из моего элемента clicked и как найти другие элементы с одним и тем же атрибутом данных, поэтому я могу назначить ему класс?

Answer 1

попробовать это,

$('.expand').click(function(){ 

    dataid = $(this).data('place-id'); 
    $('div[data-place-id="'+dataid+'"]').addClass('is-expanded'); 
    }) 

• Первого захват атрибут данные щелкнули элемент
• Mave выбора ДИВ, где данные, место-идентификатор совпадает с пролетом в данном месте ид пу конкатенации селектора атрибута ,

Answer 2

$('span.expand').click(function() { 
    $('div[data-place-id="' + $(this).data('place-id') + '"]').addClass('is-expanded'); 
}); 

Answer 3

Кристиан имеет это право, но может и не быть таким сложным. Как насчет этого?

$('span.expand').click(function() { 
    $(this).closest('div[data-place-id]').addClass('is-expanded'); 
}); 

не имеет большого значения, какое значение data-place-id это, не так ли?

Answer 4

это работает?

$('span.expand').click(function() { 
    $(this).closest('div.top-div').addClass('is-expanded'); 
});