title: How to use jQuery to change attribute of all elements in a group except one
body: <p>I have following code that shows a light box for my image gallery. There are three images and I need to allow users to click on any of the images to see the gallery in a lightbox. The issue is that when I click on one image it does not show the selected image rather shows the first image in the list / or last image that user has seen last time that opened the lightbox. <a href="http://jsfiddle.net/zwugprj3/3/" rel="nofollow noreferrer"><strong>DEMO</strong></a></p>
  
  <p>I have a carousel based on <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">http://kenwheeler.github.io/slick/</a> in my lightbox, so I need to change the order of the carousel. I noticed the plugin generates <code>tabindex</code> attribute so I am trying to change that to <code>0 for selected image</code> and <code>-1 for all other images</code> but the code does not work. I included a demo but for some reasons it does not work at all. Please use following code while I am trying to solve the issue with JSFiddle.</p>
  
  <p>To solve the issue with attributes, I had a look at these questions <a href="https://stackoverflow.com/questions/10669163/jquery-select-all-elements-except-one-with-specific-child-with-specific-attribu">1</a>, <a href="https://stackoverflow.com/questions/11211222/jquery-check-if-attr-value">2</a>, <a href="https://stackoverflow.com/questions/1912263/jquery-how-to-set-parent-attribute">3</a> but could not figure out how to use it.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;slick - the last carousel you'll ever need&lt;/title&gt;
    &lt;link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css"/&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/style.css"&gt;
  
  
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;style&gt;
  #cover-page {
    background: #fff none repeat scroll 0 0;
    margin-left: 15%;
    margin-top: 1%;
    position: absolute;
    width: 70%;
    z-index: 1001;
    visibility:hidden;
  }
  #black-cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
      filter: alpha(opacity=75);
      -moz-opacity: 0.75;
      -khtml-opacity: 0.75;
      opacity: 0.75;
      z-index: 1000;
      visibility:hidden;
  }
  #close{
      position:absolute;
      top:0;
      right:0;
        visibility:inherit;
  }
  .slick-slider {
    margin-left: 12%;
    margin-right: 9%;
  }
  .slick-slider {
      -moz-user-select: none;
      box-sizing: border-box;
      visibility:hidden;
      position: relative;
  }
  .slick-slide img {
    border: 5px solid #fff;
    display: block;
    width: 100%;
  }
  .slick-next {
    right: -66px;
  }
  
  .slick-prev {
    left: -66px;
  }
  
  #lightboxCloseBtn {
    text-decoration: none;
    color: purple;
  
  }
  
  .slick-slide.slick-current.slick-active{
    left: 0;
    opacity: 1;
    position: relative;
    top: 0;
    width: 25%;
    z-index: 999;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
          &lt;div id="black-cover"&gt;&lt;/div&gt;
          &lt;div id="cover-page"&gt;
         &lt;div id="close"&gt;&lt;a id="lightboxCloseBtn" href="#" onclick="closeBtn();"&gt;X&lt;/a&gt;&lt;/div&gt;
          &lt;h2 id="lightboxHeader"&gt;Images&lt;/h2&gt;
          &lt;div class="slider fade"&gt;
          &lt;div class="lightbox-image"&gt;&lt;img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-"/&gt;&lt;/div&gt;
            &lt;div class="lightbox-image"&gt;&lt;img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY"/&gt;&lt;/div&gt;
             &lt;div class="lightbox-image"&gt;&lt;img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ"/&gt;&lt;/div&gt;
  
          &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;a onclick="showLightBox('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-');" href="#"&gt;&lt;img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-"/&gt;&lt;/a&gt;
          &lt;a onclick="showLightBox('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY');" href="#"&gt;&lt;img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY"/&gt;&lt;/a&gt;
           &lt;a onclick="showLightBox('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ');" href="#"&gt;&lt;img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ"/&gt;&lt;/a&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://kenwheeler.github.io/slick/js/scripts.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://kenwheeler.github.io/slick/js/prism.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
      function showLightBox(address){
              $("#black-cover").css("visibility","visible");
              $("#cover-page").css("visibility","visible");
              $(".slick-slider").css("visibility","visible");
              if($('.lightbox-image.slick-slide.slick-current.slick-active &gt; img').attr('src') != address) {
                alert("here 2");
      $('.lightbox-image.slick-slide.slick-current.slick-active &gt; img').parent().attr('tabindex','-1');
  
          }
          if($('.lightbox-image.slick-slide.slick-current.slick-active &gt; img').attr('src') == address) {
                alert("here 1");
      $('.lightbox-image.slick-slide.slick-current.slick-active &gt; img').parent().attr('tabindex','0');
  
          } 
        }
  
          function closeBtn(){
              $("#black-cover").css("visibility","hidden");
              $("#cover-page").css("visibility","hidden");
              $(".slick-slider").css("visibility","hidden");
  
  }
  
          var disqus_shortname = 'slickcarousel';
  
          (function() {
              var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
              dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
              (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
          })();
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Following is the code that plugin generates:</p>
  
  <pre><code>&lt;div id="cover-page" style="visibility: visible;"&gt;
      &lt;div id="close"&gt;
          &lt;a onclick="closeBtn();" href="#" id="lightboxCloseBtn"&gt;X&lt;/a&gt;
      &lt;/div&gt;
      &lt;h2 id="lightboxHeader"&gt;Images&lt;/h2&gt;
      &lt;div class="slider fade slick-initialized slick-slider" role="toolbar"
          style="visibility: visible;"&gt;
          &lt;button role="button" aria-label="Previous"
              class="slick-prev slick-arrow" data-role="none" type="button"
              style="display: block;"&gt;Previous&lt;/button&gt;
          &lt;div class="slick-list draggable" aria-live="polite"&gt;
              &lt;div class="slick-track" style="opacity: 1; width: 3735px;"
                  role="listbox"&gt;
                  &lt;div class="lightbox-image slick-slide slick-current slick-active"
                      data-slick-index="0" aria-hidden="false"
                      style="width: 1245px; position: relative; left: 0px; top: 0px; z-index: 999; opacity: 1;"
                      tabindex="-1" role="option" aria-describedby="slick-slide00"&gt;
                      &lt;img
                          src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRu3mvhWwEfOLKJrXAXS4qATDZNtx-l04Vhwi3oXr_62Mz5lEZ-"&gt;
                  &lt;/div&gt;
                  &lt;div class="lightbox-image slick-slide" data-slick-index="1"
                      aria-hidden="true"
                      style="width: 1245px; position: relative; left: -1245px; top: 0px; z-index: 998; opacity: 0;"
                      tabindex="-1" role="option" aria-describedby="slick-slide01"&gt;
                      &lt;img
                          src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKGgx0Le2Rwg7-XSWS_EeuGeebpL-PGabrEm9hFLk2llz1MnQY"&gt;
                  &lt;/div&gt;
                  &lt;div class="lightbox-image slick-slide" data-slick-index="2"
                      aria-hidden="true"
                      style="width: 1245px; position: relative; left: -2490px; top: 0px; z-index: 998; opacity: 0;"
                      tabindex="-1" role="option" aria-describedby="slick-slide02"&gt;
                      &lt;img
                          src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSMKybiZVNTHLJXR5bukMNmKv3lCHGlkP2muKAfGn0u6VceubqMyQ"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
  
          &lt;button role="button" aria-label="Next" class="slick-next slick-arrow"
              data-role="none" type="button" style="display: block;"&gt;Next&lt;/button&gt;
          &lt;ul class="slick-dots" style="display: block;" role="tablist"&gt;
              &lt;li class="slick-active" aria-hidden="false" role="presentation"
                  aria-selected="true" aria-controls="navigation00" id="slick-slide00"&gt;&lt;button
                      tabindex="0" aria-required="false" role="button" data-role="none"
                      type="button"&gt;1&lt;/button&gt;&lt;/li&gt;
              &lt;li aria-hidden="true" role="presentation" aria-selected="false"
                  aria-controls="navigation01" id="slick-slide01"&gt;&lt;button
                      tabindex="0" aria-required="false" role="button" data-role="none"
                      type="button"&gt;2&lt;/button&gt;&lt;/li&gt;
              &lt;li aria-hidden="true" role="presentation" aria-selected="false"
                  aria-controls="navigation02" id="slick-slide02"&gt;&lt;button
                      tabindex="0" aria-required="false" role="button" data-role="none"
                      type="button"&gt;3&lt;/button&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>