javascript - JQuery selector change every 3 item -


i'm working php loops , creating multiple li in 1 ul. problem is, need show every fourth li when click on 1 of 3 previous li.

at moment works first previous li this: 

  $('.last_news li').on('click', function(){        $('+ .actu_details',this).toggleclass('expend');    });

anyone got clues

$('.last_news li').on('click', function() {      $('+ .actu_details', this).toggleclass('expend');    });
last_news {    padding: 35px  }    ul {    padding-left: 0px;    margin: 0;    overflow: hidden;  }    ul li {    list-style-type: none;    cursor: pointer;    float: left;    width: 33%;    height: 250px;    background-color: red;    margin-right: 0.5%;    margin-bottom: 5px;    color: #fff;    position: relative;  }    li:nth-of-type(3) {    margin-right: 0;  }    li:nth-of-type(4n+7) {    margin-right: 0;  }    li.actu_details {    width: 100%;    height: 0px;    background-color: green;    display: block;  }    li.actu_details.expend {    height: 350px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <section class="last_news">    <div class="contenu_grid">      <ul>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="actu_details">          detail        </li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="actu_details">          detail        </li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="actu_details">          detail        </li>      </ul>    </div>  </section>

you can use nextall() target following sibling actu_details element use :first/:eq(0)/.eq(0)/.first() target first li

$('.last_news li').on('click', function () {     $(this).nextall('.actu_details:first').toggleclass('expend');     //$(this).nextall('.actu_details').eq(0).toggleclass('expend'); }); 

 $('.last_news li').on('click', function() {     $(this).nextall('.actu_details:first').toggleclass('expend');   });
.last_news {    padding: 35px  }    ul {    padding-left: 0px;    margin: 0;    overflow: hidden;  }    ul li {    list-style-type: none;    cursor: pointer;    float: left;    width: 33%;    height: 250px;    background-color: red;    margin-right: 0.5%;    margin-bottom: 5px;    color: #fff;    position: relative;  }    li:nth-of-type(3) {    margin-right: 0;  }    li:nth-of-type(4n+7) {    margin-right: 0;  }    li.actu_details {    width: 100%;    height: 0px;    background-color: green;    display: block;  }    li.actu_details.expend {    height: 350px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <section class="last_news">    <div class="contenu_grid">      <ul>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="actu_details">          detail        </li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="actu_details">          detail        </li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="une_actu">test</li>        <li class="actu_details">          detail        </li>      </ul>    </div>  </section>

fiddle


Comments

Post a Comment

Popular posts from this blog

go - serving up pdfs using golang -

Image
just wondering if guys can code. it works serving images not pdf brochure. in advance func main(){ http.handlefunc("/", func(w http.responsewriter, r *http.request){ filename := "/var/www/filedipenser/brochure.pdf" streampdfbytes, err := ioutil.readfile( filename ) if err != nil { fmt.println(err) os.exit(1) } b := bytes.newbuffer(streampdfbytes) w.header().set("content-type", "application/pdf") if _, err := b.writeto(w); err != nil { fmt.fprintf(w, "%s", err) } w.write([]byte("pdf generated")) }) err := http.listenandserve(":4111", nil) if err != nil { log.fatal("listenandserve: ", err) fmt.println(err) } } the code bit inefficient appears working. however, pdf viewers might sensitive extraneous output adding end of http response stream...
Read more

python - Best design pattern for collection of objects -

i have following architecture: +-----------------+ | collection | | | | | | | | | +-----------------+ | ^ | | create() | | | | v | getitem(b) +------------+ | | item | | | | | | +------+ | | +------------+ a class managing collection of items, creates items. , these items may need other items collection. the actual code in python, , collection passes parameter created item . see it, bad practice. improvement can see pass few functions of collection needed item , instead of whole instance. for example: class collection: getitem(self, id): ... createitem(self, id): item = item(id, self) # <-- pass self ... class item: __init__(self, id, col): ... col.getite...
Read more

how to add preprocess loader in webpack 2 -

i trying add preprocess loader in webpack 3. have installed successfully. not working here's webconfing file var debug = process.env.node_env !== "production"; var webpack = require('webpack'); var path = require('path'); module.exports = { context: path.join(__dirname, "src"), devtool: debug ? "inline-sourcemap" : null, entry: "./js/app.js", module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader!preprocess-loader?+debug', // query: { // presets: ['react', 'es2015'], // plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], // } }, { test: /\.css$/, loader: "style-loader!css-loader!sass-loader" } ] }, output: { path: __dirname + "/src/", f...
Read more