how to do .append () on the right card, according to the right element of the array

Question

how to do .append () on the right card, according to the right element of the array

Navigation

#1 by (0 votes)

1

Good morning I'm new to programming in jquery, and right now I'm at a stage where I need to make a table, where the lines in this table consist of two buttons and four cards, if they do. For this I use a vector, $ array, that comes from my database, to generate the cards.

As the image shows.

Myproblemisthatclickingonthebuttonsshouldreplacethecurrenttextofthecards,forthetextofthefollowing/previouselements,dependingonthebuttonclicked.AndIdonotknowhowtotelljquerytodo.empty()ofthecardsonthatlineandthendo$array[$i+4].append()sincethemaximumnumberofcardsshownatonce4).

ps:Icreatedan$icountertogivethecardsaclass,soImanipulatedthemwithjquery(althoughtheytoldmeitwasnotgoodpractice,butIdidnothaveanyotheridea)Anywaytodothis?allthehelprightnowandwelcome

Beentheresince.

myHTML:(tobeused"materialize")

    <html>
    <script type="text/javascript" src="/private/includes/js/java.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>...<div><!--tabeladasvagas--><tablestyle="margin-left: 20%; margin-right: -20%;" >
      <?php
         $i=0;
         foreach($data as $row => $array){

         ?>
      <p hidden="" id="arrayhiden"><?php echo json_encode($array) ?></p>
      <tr>
         <div>
            <td>
               <button name="back" class="btn-floating btn-large waves-effect waves-indigo indigo darken-1"  onclick=pCards()><i class=" mdi-navigation-arrow-back"></i></button>
            </td>
            <td>
               <h4 style="margin-left: 15%;">Vagas de <?=$array[0]['nome'] ?></h4>
               <?php
                  foreach($array as $innerRow => $a){
                      ?> 
               <div id="<?= $i ?>" class="col s12 m3 l3" >
                  <div class="row">
                     <div class="card" id="cards">
                        <div id="logo" class="card-image">
                           <img src=<?=$a['logo']?>>
                        </div>
                        <div id="vaga" class="card-content">
                           <p><?=$a['vaga']?></p>
                        </div>
                        <div id="nome" class="card-action">
                           <a href="#"><?=$a['nome']?></a>
                        </div>
                     </div>
                  </div>
               </div>
               <?php
                  $i++;
                  } 
                  ?>
            </td>
            <td>
               <button id="forward" class="btn-floating btn-large waves-effect waves-indigo indigo darken-1"  onclick=nCards()><i class=" mdi-navigation-arrow-forward"></i></button>
            </td>
         </div>
      </tr>
      <?php
         } 
         ?>
   </table>
</div>
     ...
      </html>

My jquery:

function nCards(){

    var $aa=[];
    var $aa= $("#arrayhiden").html();
    alert($aa); //to check the array
    }

php html jquery

asked by anonymous 24.06.2015 / 14:57

1 answer

Ajax request returns SQL zero decimals REJECTED_NONFASTFORWARD error in git push Netbeans

score 0 · Accepted Answer

Nuno Gonçalves what you are trying to do is called CAROUSEL and there are several plugins who already do this.

Below is an example using the jCarousel

jCarousel

jquery:

#jquery
$(function() {
    $('.jcarousel').jcarousel();
});

html:

#html
<div class="jcarousel">
<ul>
    <li>...</li> <!-- Cada LI será um 'card' -->
    <li>...</li> <!-- Cada LI será um 'card' -->
</ul>

css:

#css
.jcarousel {
    position: relative;
    overflow: hidden;
}
.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.jcarousel li {
    float: left;
}