Select the item loaded via Ajax by data attribute


I'm loading a number of nested divs via ajax and need to select specific elements by data attribute. The code below works OK when changing the background of a div.

    type: "POST",
    url: "scripts/get_transcription.php",
    data: {
        gene: 1,
    success: function(data) {
    $('*[data-type="P"]').css('background', 'red');

However, if instead of changing the background I want to say set opacity of that specific div, all the divs are assigned the opacity:

$('*[data-type="P"]').css({opacity, 0.5});

Same if I use fadeOut() on the div...all the divs fade out. Why does css background work for the specific div and not opacity or fadeOut(which are applied to all the divs)?


Looks like the ol' div not being closed catcha. The closing div for each transcription_segment was outside the while loop as shown here:

echo "<div id='transcription_segments' style='width:2000px;;white-space:nowrap;float:left;'>";
while($row = mysql_fetch_assoc($result)) {
echo "

<div id='transcription_segment_" . $row['gene_dna_segments_pk'] . "' data-transcription-segment='" . $row['gene_dna_segments_pk'] . "' data-type='"  . substr($row['dna_segment_type'], 0, 1) . "' style='width:" . $row['dna_segment_length'] . "px;display:inline-block;'>

<div style='width:" . $row['dna_segment_length'] . "px; height:auto;font-family: Delicious, sans-serif;font-size:16px;color:" . $row['colour'] . ";text-align:center;font-weight:bold;line-height:1.4;float:left;'>" . $row['dna_segment_type'] . "</div>

<div style='width:" . $row['dna_segment_length'] . "px;height:12px;background:" . $row['colour'] . "; float:left'></div>";
echo "</div></div>";

Missing closing div's are causing the issue into js element selector.