0
<div id=main>
    <img id=leftbutton>
    <div id=inner>
        <div class=one>
            <img />
            <img />
        </div>
        <div class=two>
            <img />
            <img />
        </div>
        <div class=two>
            <img />
            <img />
        </div>
        <div>
            <img id=rightbutton>
        </div>
    </div>
</div>

Trying to create a carousel.I am hiding class(two) at first showing only class(one). If I knew the active class(which is displayed) I can make a function to display next sibling when I press rightbutton but how to identify the siblings which is displayed among all other siblings

Siamak Ferdos
  • 3,181
  • 5
  • 29
  • 56
Lambo
  • 79
  • 2
  • 11

2 Answers2

0

if I get your question right, it might be clever to add an 'active' class to the active class (haha ;) ). You can than just look for the class that is flagged with that class. In pure js you have to add and remove a further class with string operations on the class-property of that element. Therefore see this

Depending on the css you use for hiding your elements in first place you could look for that properties. Assuming you use display:none; and display:block; just look for the one that is set to block;

//EDIT: As you now provided everything needed to answer your needs. The visible element in the fiddle is getting alerted.

see this fiddle. 

var lookup = document.getElementById('lookup');
for(i in lookup.children){
    var elementDisplay = window.getComputedStyle(lookup.children[i]).display;
    if(elementDisplay != 'none' ){
         //whatever you want to do with your visible element goes h
         alert(lookup.children[i].innerText);   
    }
}
Community
  • 1
  • 1
bastianowicz
  • 358
  • 2
  • 9
  • I knew it but what I am trying to ask is suppose you clicked on right button now the div with class name two(first one) is displayed in page. How come you identify that div now since its displayed in page – Lambo Jun 15 '15 at 07:17
  • i think that depends on the css you use for hiding it in first place. if you use display:none; and display:block; just look for the one that is set to block; – bastianowicz Jun 15 '15 at 07:22
  • Is it possible to find an element by css property in JS – Lambo Jun 18 '15 at 05:02
  • hey, if this was helpful to you, would you mind marking it as answered? otherwise please tell me what further help you need to get your script running. – bastianowicz Jul 02 '15 at 08:57
  • Thanks for your assistance.Since I am the developer I created carousel using javascript on my own – Lambo Jul 03 '15 at 11:08
0

Try this example:

var goLeft = function(e) {
  var active = $('#inner .active'); //get current visible
  var prev = active.prev('.item');
  if (prev.length) { // has some items to the right
    prev.toggleClass('active'); // make it active
    active.toggleClass('active'); // hide this
  }
};

var goRight = function(e) {
  var active = $('#inner .active');
  var next = active.next('.item');
  if (next.length) { // has some items to the left
    next.toggleClass('active'); // make it active
    active.toggleClass('active');
  }
};

$(function() {
  $('#leftbutton').on('click', goLeft);
  $('#rightbutton').on('click', goRight);
});
#main img {

  width: 40px;

  height: 40px;

  border: 1px solid grey;

}

#inner div.item {

  display: none;

  /* hide all by-default */

}

#leftbutton,

#rightbutton {

  cursor: pointer;

}

#inner div.active {

  display: initial;

}

div.one:after {

  content: "One";

}

div.two:after {

  content: "Two";

}

div.three:after {

  content: "Three";

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="main">
  <img id="leftbutton" />
  <div id="inner">
    <div class="one active item">
      <!-- default visible -->
      <img />
      <img />
    </div>
    <div class="two item">
      <img />
      <img />
    </div>
    <div class="three item">
      <img />
      <img />
    </div>
  </div>
  <img id="rightbutton" />
  <!-- moved outside -->
</div>