add css property to all div having same class in jquery

Question

I have multiple div with same class name.I want to apply css 'z-index:99' for all div which is having same class name in playbutton click.using jquery.Working only for first Play Button.I want to trigger for all playbutton click

jQuery(document).ready(function($) {
  $("#playButton").click(function() {
    $(".close_icon").css('display', 'block');
    $(".video-container").css('z-index', '99');
    $(".videoThumbnail").css('z-index', '99');
  });

  $('iframe').load(function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  iframe{height: 100%;left: 50%;min-height: 100vh;min-width: 100%; position: absolute;top: 60%;transform: translate(-50%, -60%);width: 100%;}  </style>"));
  });
  $(".close_icon").click(function() {
    $(".video-container").css('z-index', '0');
    $(".close_icon").css('display', 'none');
    $("#header").show();

  });
});

function callPlayer(frame_id, func, args) {
  if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
  var iframe = document.getElementById(frame_id);
  if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
    iframe = iframe.getElementsByTagName('iframe')[0];
  }
  if (iframe) {
    // Frame exists, 
    iframe.contentWindow.postMessage(JSON.stringify({
      "event": "command",
      "func": func,
      "args": args || [],
      "id": frame_id
    }), "*");
  }
}

#video-container {
  width: 100%;
}
.contentContainer {
  background: #5852a3;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #5852a3, #973695);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #5852a3, #973695);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgb(159, 74, 159, 0.5), rgb(112, 91, 168, 0.5));
  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(88, 82, 163, 1) 0%, rgba(151, 54, 149, 1) 100%) repeat scroll 0 0;
  position: relative;
  z-index: 2;
  opacity: 0.9;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  min-width: 100%;
  text-align: center;
  padding: 4% 0% 0% 0%;
}
.video-container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="video-container" id="video-container">
    <h1> background 1</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" id="playButton">Play button</a>
    </div>
  </div>
</div>
<div class="content">
  <div class="video-container" id="video-container">
    <h1>background 2</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" id="playButton">Play button</a>
    </div>
  </div>
</div>

that is because the button is now hiding at the back of the background becasuse of its z-index. try setting the z-index of the button greater than the zindex of bg. — Ron.Basco
– Ron.Basco, Commented Dec 27, 2016 at 5:45
@Ron.Basco That may be the case, but the issue OP is describing (only one Play button functions) is because he's using the same ID for both buttons and trying to use ID as the jQuery selector. — Jon Uleis
– Jon Uleis, Commented Dec 27, 2016 at 5:46

Abhishek Pandey · Accepted Answer · 2016-12-27 06:04:08Z

3

You can't use same ID for multiple elements #video-container and #playButton, try with class.

$(".playButton").click(function() {
   $(".close_icon").css('display', 'block');
   $(".video-container").css('z-index', '99');
   $(".videoThumbnail").css('z-index', '99');
});

edited Dec 27, 2016 at 6:04

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

answered Dec 27, 2016 at 5:45

Talent Runners

4195 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ScanQR Over a year ago

This answer will still apply css to all div in the DOM and not particular to div in which the button is clicked.

ScanQR · Accepted Answer · 2016-12-27 05:55:04Z

You have defined multiple elements with same id. Id must be unique. Also you should find the closest div with class content and find elements within that to apply css to and not to all.

jQuery(document).ready(function($) {
  $(".playButton").click(function() {
    $(this).closest("div.content").find(".close_icon").css('display', 'block');
    $(this).closest("div.content").find(".video-container").css('z-index', '99');
    $(this).closest("div.content").find(".videoThumbnail").css('z-index', '99');
  });

  $('iframe').load(function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  iframe{height: 100%;left: 50%;min-height: 100vh;min-width: 100%; position: absolute;top: 60%;transform: translate(-50%, -60%);width: 100%;}  </style>"));
  });
  $(".close_icon").click(function() {
    $(this).closest("div.content").find(".video-container").css('z-index', '0');
    $(this).closest("div.content").find(".close_icon").css('display', 'none');
    $("#header").show();

  });
});

function callPlayer(frame_id, func, args) {
  if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
  var iframe = document.getElementById(frame_id);
  if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
    iframe = iframe.getElementsByTagName('iframe')[0];
  }
  if (iframe) {
    // Frame exists, 
    iframe.contentWindow.postMessage(JSON.stringify({
      "event": "command",
      "func": func,
      "args": args || [],
      "id": frame_id
    }), "*");
  }
}

#video-container {
  width: 100%;
}
.contentContainer {
  background: #5852a3;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #5852a3, #973695);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #5852a3, #973695);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgb(159, 74, 159, 0.5), rgb(112, 91, 168, 0.5));
  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(88, 82, 163, 1) 0%, rgba(151, 54, 149, 1) 100%) repeat scroll 0 0;
  position: relative;
  z-index: 2;
  opacity: 0.9;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  min-width: 100%;
  text-align: center;
  padding: 4% 0% 0% 0%;
}
.video-container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="video-container">
    <h1> background 1</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" class="playButton">Play button</a>
    </div>
  </div>
</div>
<div class="content">
  <div class="video-container">
    <h1>background 2</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" class="playButton">Play button</a>
    </div>
  </div>
</div>

Talent Runners · Accepted Answer · 2017-02-09 13:56:19Z

Instead of giving id="playButton" to the playbutton. change it to class="playButton". Since selecting Id jquery selects only one element

jQuery(document).ready(function($) {
  $(".playButton").click(function() {
    $(".close_icon").css('display', 'block');
    $(".video-container").css('z-index', '99');
    $(".videoThumbnail").css('z-index', '99');
  });

  $('iframe').load(function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  iframe{height: 100%;left: 50%;min-height: 100vh;min-width: 100%; position: absolute;top: 60%;transform: translate(-50%, -60%);width: 100%;}  </style>"));
  });
  $(".close_icon").click(function() {
    $(".video-container").css('z-index', '0');
    $(".close_icon").css('display', 'none');
    $("#header").show();

  });
});

function callPlayer(frame_id, func, args) {
  if (window.jQuery && frame_id instanceof jQuery) frame_id = frame_id.get(0).id;
  var iframe = document.getElementById(frame_id);
  if (iframe && iframe.tagName.toUpperCase() != 'IFRAME') {
    iframe = iframe.getElementsByTagName('iframe')[0];
  }
  if (iframe) {
    // Frame exists, 
    iframe.contentWindow.postMessage(JSON.stringify({
      "event": "command",
      "func": func,
      "args": args || [],
      "id": frame_id
    }), "*");
  }
}

#video-container {
  width: 100%;
}
.contentContainer {
  background: #5852a3;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, #5852a3, #973695);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, #5852a3, #973695);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgb(159, 74, 159, 0.5), rgb(112, 91, 168, 0.5));
  background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(88, 82, 163, 1) 0%, rgba(151, 54, 149, 1) 100%) repeat scroll 0 0;
  position: relative;
  z-index: 2;
  opacity: 0.9;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  min-width: 100%;
  text-align: center;
  padding: 4% 0% 0% 0%;
}
.video-container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="video-container" id="video-container">
    <h1> background 1</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" class="playButton">Play button</a>
    </div>
  </div>
</div>
<div class="content">
  <div class="video-container" id="video-container">
    <h1>background 2</h1>
  </div>
  <div class="contentContainer">
    <div class="playVideo"><a href="javascript:void callPlayer(&quot;player&quot;,&quot;playVideo&quot;)" class="playButton">Play button</a>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

add css property to all div having same class in jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related