javascript - Get element's index in selector of multiple elements -


i have group of essential dropdown lists on page. each list has heading. when heading clicked, list's height transition 0 whatever height of list in pixels; animates make list grow position.

because of restrictions in css, can not transition height auto. must transition height numerical value. because height if each list different, work around follows:

  1. when page loads, lists open
  2. grab height of each list in pixels, , put array heights
  3. set each list's height 0, hide them.
  4. when list's heading clicked, transition height stored in array

the problem i'm having trying associate index of number in heights index of div hat has been clicked on page. here sample of 2 lists.

<div id="awards">     <div class="content">         <div>             <h1>alien 3</h1>             <div>                 <h2>nominated</h2><hr>                 <p>hugo award best dramatic presentation</p>                 <p>saturn award best director</p>             </div>         </div>         <div>             <h1>se7en</h1>             <div>                 <h2>won</h2><hr>                 <p>fantasporto best film</p>             </div>         </div>         ...

and click event's jquery:

$('#awards h1').click(function () {      var indexpos = $(this).index('#awards .content div div'); //get index of clicked element out of '#awards .content div div's (the lists)      if ($(this).hasclass('open')) {          $('#awards .content div div').index(indexpos).css('height', heights[indexpos]);      } else if (!$(this).hasclass('open')) {          $('#awards .content div div').index(indexpos).css('height', '0');      }      $(this).toggleclass('open');  });

and measure, here how array being created when document loads:

var heights = [];  $('#awards .content div div').each(function(index, element) {         heights.push($(this).height()); });  $('#awards .content div div').css('height','0');

so, missing? when check value of indexpos after setting it, it's -1, aka not found. might have misunderstanding of how .index() works, how fix it?

i don't think using height best idea, can toggle display property hide/display element.

but if still want use height, instead of array try using data property like

$('#awards h1').click(function () {     var $this = $(this),         $div = $this.next();      if ($(this).hasclass('open')) {         $div.height($div.data('height'));     } else if (!$(this).hasclass('open')) {         $div.height(0);     }      $(this).toggleclass('open');  });   $('#awards .content div div').each(function (index, element) {     $(this).data('height', $(this).height()) }).height(0);

i don't know exact requirement, can simplified as

$('#awards h1').click(function() {    $(this).toggleclass('open');  });
#awards h1 + div {    display: none;  }  #awards h1.open {    color: green;  }  #awards h1.open + div {    display: block;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="awards">    <div class="content">      <div>        <h1>alien 3</h1>        <div>          <h2>nominated</h2>          <hr/>          <p>hugo award best dramatic presentation</p>          <p>saturn award best director</p>        </div>      </div>      <div>        <h1>se7en</h1>        <div>          <h2>won</h2>          <hr/>          <p>fantasporto best film</p>        </div>      </div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

i have following sample code used pre-decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(--c); cout << c << endl; return; } } this function give output input 4 : dp3 dp2 dp1 dp0 0 1 2 3 but when use post decrement void function(int c) { if(c == 0) { return; } else { cout << "dp" << c << endl; function(c--); cout << c << endl; return; } } output goes in infinite loop dp4 can explain me in detail why happens ? this happens because function(c--) called same value of c , when finishes c decremented. recursively called, hence called same value no chance of return , hit stack overflow error. assume this, int x = 1, y = 0; y = x++ result y == 1 , x == 2. if y = ++x , bot x , y 2.
Read more

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

i added new project. made mistake in projectname.conf file in sites-available apache2, led me reinstalling apache2. after reinstalling , re-enabling projects on every page of every project .. <body> run(); </body> .. i've run composer update, restarted service, restarted pc, checked config files, tried disabling new project. there nothing in error log, , access.log: 127.0.0.1 - - [15/may/2015:01:40:47 +0200] "get / http/1.1" 304 181 "-" "mozilla/5.0 (x11; ubuntu; linux x86_64; rv:38.0) gecko/20100101 firefox/38.0" maybe i'm forgetting apache2 reinstall? don't think did different last time installed it. looks haven't setup php correctly. take @ this great guide , maybe you're forgetting link php config apache2.
Read more

php - How can I echo out this array? -

i don't know how go grabbing data in variable , put foreach loop. class tree{ private $info = array( array('name'=>'jim','state'=>'nu','company'=>'nu','phone'=>array('cell'=>'5615111111','office'=>'5611111111'),'email'=>array('primary'=>'exs@example.com','ex@there.com')), array('name'=>'joe smith','city'=>'phoenix','phone'=>'4805551111','email'=>'jsmith@some_email.com'), array('name'=>'john doe','city'=>'chandler','company'=>'doe co.','email'=>array('jdoe@gmail.com','personal'=>'email@email.com'),'phone'=>'6025550002') ); } if you're inside of class, can access private variable using $this->variablename . example, i...
Read more