2

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.

 $.ajax({
    type: "POST",
    url: "scripts/get_transcription.php",
    data: {
        gene: 1,
    },
    success: function(data) {
    $('#transcription').html(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)?

EDIT

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>";
?>
IlludiumPu36
  • 4,196
  • 10
  • 61
  • 100
  • 1
    CSS element opacity is multiplied down through child elements so it will effect all child elements inside the div's. refer this http://stackoverflow.com/questions/2561460/css-opacity-and-child-elements Also js fadeout will fadeout div with its all inner content. – Neha Dec 05 '13 at 04:30
  • Well that's what I expect to happen, but it looks like its being applied to the parent div, as all nested divs with data value other than 'P' are being faded out. – IlludiumPu36 Dec 05 '13 at 04:45
  • This page has a fix to this but it isn't pretty. http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/ – DutGRIFF Dec 05 '13 at 04:47
  • 1
    @peter umm just a concern your div tags with data-type="" attr donot have closing div's. – Neha Dec 05 '13 at 05:27
  • Accidently omitted while putting together the examples...they exist in the php generated divs... – IlludiumPu36 Dec 05 '13 at 06:15
  • Neha - Checking php file...oops, the closing divs for the transcription_segment divs is actually outside of the while loop. That has fixed the problem! Please put your comment into an answer! Many thanks for spotting this. – IlludiumPu36 Dec 05 '13 at 06:24

3 Answers3

1

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

Neha
  • 1,548
  • 2
  • 10
  • 13
0

How does the response look like?

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

Will respectively affect all elements with the specific data attribute.

Dave Cartwright
  • 358
  • 1
  • 7
0

your code is correct but I did not a get chance to debug it, but here is quick solution. I think you can solve it by following css line

div[data-type="P"]{opacity:0.5;}

Have a nice day!

Rakesh
  • 139
  • 7