We Keep Coding

Rearrange children orger in Javascript doesn't work multiple times

I've got the following code to move the childs order in an element. When I click once, it works fine, but when I click multiple times, it only works every 2nd or 3rd time.
const prevP = () => {
const pList = document.getElementById("project-list")
const firstProject = pList.firstChild;
const lastProject = pList.lastChild;
pList.insertBefore(lastProject, firstProject);
}
const nextP = () => {
console.log("next");
const pList = document.getElementById("project-list")
const firstProject = pList.firstChild;
let lastProject = pList.lastChild;
pList.insertBefore(firstProject, lastProject);
}
<span class="material-icons md-48 close icon-btn" onclick="prevP()"
>navigate_before</span
>
<div class="project-list" id="project-list">
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 1</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 2</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 3</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 4</p>
</div>
<div class="project">
<img href="protfolio" alt="" />
<p>My Portfolio 5</p>
</div>
</div>
<span class="material-icons md-48 close icon-btn" onclick="nextP()"
>navigate_next</span
>
I also realised that sometimes the code messes up the order of the elements when using both buttons, and I have no idea why this is happening

The cause of that behaviour is that you use firstChild and lastChild. These may select text nodes with just some white space. Change these to firstElementChild and lastElementChild.
Secondly, the "Next" action should not insert the first element before the last element, but after it. For that you can use the method appendChild:
pList.appendChild(firstProject);

JQuery: Get Text from another <div> only by class

I'm trying to access text from an other div only by classes and with JQuery. I'm always struggling with JQuery because I'm not that familiar with it but for the most times i can get it to work somehow.
I tried something like this:
$(function() {
$(".quote_button").click(
function () {
var text = $(this).parent('.openticket_footer').prev('.openticket_warper').find('.answer_message').text();
alert(text);
}
);});
And many other ways but i cant figure it out.
The easiest way to show you what i want to do is by this picture:
Quote function
I want to click on the class="quote_button"button to access the text in class="answer_message"
Here the html code:
<div class="openticket_warper">
<div class="openticket_sidebar float_left">';
if($result["uID"]==$result_answer["uID"]){
echo '<p style="font-size: 8pt">Ersteller</p>';
}
echo '<p><strong>'. $result_answer["uName"] .' '. $result_answer["Firstname"] .'</strong></p>
<p style="font-size: 10pt">'. $result_answer["pName"] .'</p>
<div class="openticket_sidebar_userpicture">
<img src="images/default-user-icon.png" alt="User Picture">
</div>
</div>
<div class="openticket_ticketmesssage">
<p class="answer_message">'. $result_answer["Message"] .'</p>
</div>
<div class="clear"></div>
</div>
<div class="openticket_footer">
<input class="answerbutton float_right quote_button" type="button" value="Zitieren">
<div class="clear"></div>
</div>
Thank You!

Try this : Get parent using parent method, move to previous div and then find answer_message to get the text
$(function() {
$(".quote_button").click(function () {
var $parent = $(this).parent('.openticket_footer').prev('.openticket_warper');
var text = $parent.find('.answer_message').text();
alert(text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="openticket_warper">
<div class="openticket_sidebar float_left">';
<p style="font-size: 10pt">Name of the candidate</p>
<div class="openticket_sidebar_userpicture">
<img src="images/default-user-icon.png" alt="User Picture">
</div>
</div>
<div class="openticket_ticketmesssage">
<p class="answer_message">Text Message is here</p>
</div>
<div class="clear"></div>
</div>
<div class="openticket_footer">
<input class="answerbutton float_right quote_button" type="button" value="Zitieren">
<div class="clear"></div>
</div>

$(document).on('click', '.quote_button', function(){
alert($(this).parents('.openticket_warper').find('.answer_message').text());
});

I want the station name to be changed when user clicks play button

I have the fiddle all ready to go I just need help with the jquery/javascript part. What I want is to have the record name/station title change when the user clicks on the play button they find on hovering over the album cover. I also want the record/vinyl in the "player" box to start spinning. Right now it spins on hover but I want to change that.
Here is the fiddle http://jsfiddle.net/7txt3/1/
and here is just the html code because the css is kinda long!
<div class="grid_12">
<div class="grid_6 alpha"><!-- record, overflow:hidden -->
<div id="player">
<div id="recordbox">
<div class="record2">
</div>
</div>
<div class="bars-box">
<div class="player-box">
<div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
<div class="bars">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
</div>
</div>
</div>
</div>
<div class="grid_3">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
<a class="play" href="#">Play</a>
</div>
<div class="salad"><!-- sleeve -->
<h3>Groove Salad</h3>
</div>
</div>
</div>
<div class="grid_3 omega">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">Sensuous and mellow vocals, mostly female, with an electronic influence.</p>
<a class="play" href="#">Play</a>
</div>
<div class="lush"><!-- sleeve -->
<h3>Lush</h3>
</div>
</div>
</div>

Something like this?
$(function(){
var station = $('.player-station');
$('.play').click(function(){
station.text($(this).closest('.album').find('h3').text());
});
});
Demo: http://jsfiddle.net/7txt3/3/
For spinning you can use: http://code.google.com/p/jqueryrotate/

So, first thing is first... you need to read up on the use of an ID versus the use of a Class. To put it a bit simply:
ID = Unique identifier for an element
Class = Identifier for a series of elements
The reason I bring this up is because you have odd naming conventions like class="lush" which don't make sense. That should be an id, and the class should be something like "sleeve".
Anyway, here's the updated code and fiddle. Yes, you can make it a bit more condensed (not set a var for the title), but I wanted to spread it out so you could see the code a little better. If you have questions, let me know.
$('a.play').click(function() {
var title = $(this).closest('.album').find('.album-title');
$('span.player-station').text($(title).text());
});​
I also added a class to the h3 tags, just so you didn't run into any issues down the road:
<h3 class="album-title">Lush</h3>
Here's the fiddle:
http://jsfiddle.net/7txt3/4/

Need DIV show/hide Switch to happen AFTER SlideToggle occurs

I have a series of "product" divs in a grid, each of which is clickable. When one is clicked, the corresponding "product info" DIV slides down to reveal the corresponding product info. I have it working somewhat but I'm having a couple of issues.
How can I make it so that when one set of info is showing, but ANOTHER "product" div is clicked, the current info slides into hidden status, the product info is switched and THEN the new info is revealed. Make sense?
If the code below doesn't make sense, the direct link is here
This is the HTML for the hidden info. The class 'selected_show' is styled with "display:none;" to start:
<section>
<div class=selected_show>
<div>
<div class="product_info grassone piece_info">
<img src="./images/detail_info/astronomical.jpg">
<div>
<p>Short description of the piece...</p>
</div>
</div>
</div>
<div>
<div class="product_info competitive piece_info">
<img src="./images/detail_info/astronomical.jpg">
<div style="background:red;">
<p>Short description of the piece...</p>
</div>
</div>
</div>
<div>
<div class="product_info magpie piece_info">
<img src="./images/detail_info/astronomical.jpg">
<div style="background:blue;">
<p>Short description of the piece...</p>
</div>
</div>
</div>
</div>
</section>
This is where the info is chosen:
<section>
<div class="piece woodcut">
<p>GRASSONE</p>
</div>
<div class="piece woodcut">
<p>COMPETITIVE</p>
</div>
<div class="piece woodcut">
<p>MAGPIE</p>
</div>
</section>
This is the script for the effect:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$('a.showinfo').click(function(e){
e.preventDefault();
$("html, body").animate({ scrollTop: 100 }, "slow");
$(".selected_show").slideToggle();
var a_href = '.'+ $(this).attr('href');
$('.product_info').hide();
$(a_href).show();
});
</script>
Ideas?

Use the slideToggle's callback:
$(".selected_show").slideToggle(1000, function(){
$('.product_info').hide();
});

Programmatically apply the image alt attribue as a class to parent element

I want to add as a class the image alt attribute to its container element. Markup:
<div class="field-group-our-people">
<div class="field-items even>
<img alt="John">
</div>
<div class="field-items odd>
<img alt="Kevin">
</div>
<div class="field-items even>
<img alt="Kate">
</div>
<div class="field-items odd>
<img alt="Martin">
</div>
</div>
To be like this:
<div class="field-group-our-people">
<div class="field-items even john>
<img alt="John">
</div>
<div class="field-items odd kevin>
<img alt="Kevin">
</div>
<div class="field-items even kate>
<img alt="Kate">
</div>
<div class="field-items odd martin>
<img alt="Martin">
</div>
</div>
My Jquery code(but not working):
//Add the image alt attribute as class for individual styling
$('.group_our_people .field-item').each(function() {
var att = $('.group_our_people .field-item img').attr('alt');
$(this).addClass(att);
});
What is wrong/missing in my code?

You should get the img that is child of the current div (on iteration):
var att = $(this).find('img').attr('alt');
The way you're doing (i.e. repeating the selector), you end up retrieving multiple values, and only the first one is taken into account. So, every div will get its class: "John".

$('.field-group-our-people .field-items img').each(function() {
$(this).parent().addClass( $(this).attr('alt') );
});

$('div.field-group_our_people div[class^=".field-items"] img').each(function()
{
var att = $(this).attr('alt');
$(this).parent().addClass(att);
});