CODEWITHSUNDEEP
javascriptjquery
user934902
user934902

Reputation: 1204

jQuery. Move child append data

I have a list (dynamic) in which the FIRST LI is hidden but the data it contains is inserted in the div header above. I have two anchors that move the list up and down.

I am trying to make it so it the user clicks up, the second list item moves to the top of the list (and its data is appended into the header) and the actual LI gets hidden. And if the user clicks down the last list item gets moved to the front (its data once again appended into the header and it gets hidden)

I cant seem to get the list items to move on clicks

HTML

<div class="top">
  <a href="#" onclick="slide('up')"></a>
  <h1 class="mainTitle"></h1>
  <a href="#" onclick="slide('down')"></a>
</div>

<ul>
 <li><span class="subtitle">Title 1</span></li>/*First div always hidden and data appended to h1*/
 <li><span class="subtitle">Title 2</span></li>
 <li><span class="subtitle">Title 3</span></li>
 <li><span class="subtitle">Title 4</span></li>
 <li><span class="subtitle">Title 5</span></li>
</ul>

jQuery

$(document).ready(function () {
    $('li:first-child').css('display', 'none');
    $('.mainTitle').append($('li:first-child .subtitle').html());


    function slide(direction) {
      if (direction === 'up') {
        $('li:first-child').before($('li:last-child'));
      } else {
        $('li:last-child').before($('li:first-child'));
      }
    }

});

Upvotes: 0

Views: 170

Answers (2)

epascarello
epascarello

Reputation: 207501

You can not call slide, because the function is scope is not global. Remove the function from the ready call. Better solution, add the events with jQuery and not inline.

Solution 1

$(document).ready(function () {
    $('li:first-child').css('display', 'none');
    $('.mainTitle').append($('li:first-child .subtitle').html());
});

function slide(direction) {
  if (direction === 'up') {
    $('li:first-child').before($('li:last-child'));
  } else {
    $('li:last-child').before($('li:first-child'));
  }
}

A better solution

$(document).ready(function () {
    $('li:first-child').css('display', 'none');
    $('.mainTitle').append($('li:first-child .subtitle').html());    

    function slide(direction) {
      if (direction === 'up') {
        $('li:first-child').before($('li:last-child'));
      } else {
        $('li:last-child').before($('li:first-child'));
      }
    }

    $(".top").on("click","a",function(e){
        slide( $(this).data("direction") );
        e.preventDefault();
    });
});

and the HTML:

<div class="top">
  <a href="#" data-direction="up"></a>
  <h1 class="mainTitle"></h1>
  <a href="#" data-direction="down"></a>
</div>

Upvotes: 1

MrSynAckSter
MrSynAckSter

Reputation: 1770

Change the inline to jQuery a la' :

$( ".subtitle" ).click(slide(up););

http://api.jquery.com/click/

Or with vanilla JS: 

document.getElementById('.subtitle').onmousedown = function() {
    slide();

};

Then, remove the slide function from the jQuery block you gave in your question, and the scope problems go away.

Upvotes: 0

Related Questions