We Keep Coding

Getting parent element javascript

I have a bit of a problem which i just can't get my head round, i could but it would just be defeating the whole purpose of getting better. So with that being said i have set of elements which all have the same class name and when i select a button i want it to only get me the elements within that parent that is clicked.
<article class="col-xs-12 col-sm-3">
<a href="http://79.170.43.200/shaveandsubscribe2.co.uk/shaveandsubscribe2/index.php/gillette-fusion-proshield.html?___SID=U">
<h3>Gillette Fusion ProShield</h3>
<pid class="temp_pid" style="display:none;">366730415</pid>
<pid2 class="temp_pid" style="display:none;">373545146</pid2>
<pid3 class="temp_pid" style="display:none;">373546370</pid3>
<img src="http://79.170.43.200/shaveandsubscribe2.co.uk/shaveandsubscribe2/media/catalog/product/cache/1/image/265x/9df78eab33525d08d6e5fb8d27136e95/g/i/gillette-fusion-proshield.jpg" alt="Gillette Fusion ProShield" class="img-responsive">
</a>
<div class="1" style="display:none;">
<button type="button" id="1" title="Proceed" class="button btn-cart" onclick="getUrl(this.id);"><span><span>Proceed</span></span></button>
<input type="hidden" id="x1" class="rrp_price" name="rrp_price" value="$19.4900">
<input type="hidden" id="y1" class="spcl_price" name="spcl_price" value="$19.4900">
</div>
<button class="price-change" id="1" value="£19.49" name="£19.49" onclick="getSet(this.id);">Select</button>
</article>
the class i am trying to get is "temp_pid" now i have the code above there is effectively 3 lots of that at the minute my script get's all of the temp_pid classes which in total is 9.
jQuery('body').on('click','.price-change',function(){
localStorage.removeItem('priceChange');
localStorage.setItem('priceChange', "priceChange");
// alert(localStorage.getItem("priceChange"));
// cratejoy script to capture product ids aka <pid> etc...
if(jQuery('.price-change').hasClass('selected')){
var x = document.getElementsByClassName('temp_pid');
for(var i = 0; i < x.length; i ++){
console.log(x[i].innerHTML);
}
};
});

Try data-id.It will select the element within the parent.I hope it will work

How to proper positioning elements in jQuery Mobile?

I want to have in listview in listitem (Note: the listitem <li> is generated dynamically with JS) product value on the left and button on the right but
I have align="center" in <div data-role="main" align="center">
and get centered product value and button but if I place in <div> (in listitem) product value and in another <div> a button
I get on the left product value and on the right button (but in lower line)
like this img
so how to proper position this?
var li = '<li><div>' + productVal + btn + '</div></li>';
so on the left sth and on the right a button
here is my code https://jsbin.com/revuto/edit?html,output
actually I have
but want
sorry for Polish text in code
so I translate Polish - English
Wprowadź product - provide a product
dodaj - add
usuń- remove
niebezpieczna strefa- danger zone

use a wrapper classed ui-grid-a and wrap each "column" in a div ui-block-a and ui-block-b
e.g.
<div class="ui-grid-a">
<label class="ui-block-a" for="input">
label: <input type="text" id="input">
</div>
<div class="ui-block-b">
<br>
<button type="button" >Button</button>
</div>
</div>

referencing jQuery created element, to register a click (with fiddle)

I'm working on a project which would require the user to be able to add, and edit tags.
On the page, is: a div container, containing the tags, a textbox (newTag) and a button (add tag) that will add a tag to the container. Another textbox (editTag) and a button (update tag) that will update the tag information typed in by the user. There is also a select list that will, in realtime - keep track of all the changes made.
Wen a user clicks on a tag that was already rendered, to edit it - all works well. The tag name goes into the edit textbox, and the tag is selected in the list.
The problem arises when a user created tag gets clicked... nothing happens. I have a feeling it has to do with the fact the object is in the DOM, but isn't rendered HTML. But I have no clue as to how to resolve this issue - how to reference a click of a dom object.
Here's my code:
HTML:
<!-- tags container -->
<div class="container_12">
<div class="grid_2"><img src="images/spacer.png" /></div>
<div id="content" class="grid_8">
<button name="PHP" class="tag-button">PHP</button>
<button name="CSS" class="tag-button">CSS</button>
</div>
<div class="grid_2"><img src="images/spacer.png" /></div>
</div>
<!-- tags container end -->
<!-- action buttons container -->
<div class="container_12 action-bar">
<div class="grid_4"><img src="images/spacer.png" /></div>
<div id="action-add">
<input type="text" name="newTag" id="newTag" />
<input type="button" id="add" value="Add tag" />
</div>
<div class="grid_4"><img src="images/spacer.png" /></div>
<div id="action-edit">
<input type="text" name="editTag" id="editTag" />
<input type="button" id="update" value="Update tag" />
</div>
<!-- action buttons container end -->
</div>
<!-- Real Time list container -->
<div class="container_12">
<div class="grid_4"><img src="images/spacer.png" /></div>
<select id="insertString">
<option value="0">PHP</option>
<option value="1">CSS</option>
</select>
</div>
<!-- real time list container end -->
jQuery:
//button add click
$('#add').click(function() {
//creating a new tag for the tag bar
var tag = $('#newTag').val();
var tagHTML=$('<button name= "' + tag + '" class="tag-button">'+ tag + '</button>');
var qString = "";
// adding the tag to the bar
$("#content").append(tagHTML);
//get last value in the list
var lastValue = $('#insertString option:last-child').val();
if (! lastValue) {lastValue = 0;}
else {lastValue = ++ lastValue; }
//add new option for the new tag
$('<option value="' + lastValue + '">' + tag + '</option>').appendTo("#insertString")
})
//tag button click
$(".tag-button").click(function(){
var name = $(this).attr('name');
//add the tag name to the editTag textbox
$('#editTag').val(name);
$('#insertString option:contains("'+ name + '")').attr('selected', true);
});
Also, here's my fiddle:
http://jsfiddle.net/Lm3ab/
Help would be appreciate, and thank you for your time.

You need to use Event Delegation. You have to use .on() using delegated-events approach.
Use
$("#content").on("click", ".tag-button", function() {
DEMO

just add another click, thus
$("#content").on("click", ".tag-button", function(){});
http://jsfiddle.net/Lm3ab/1/

Event delegation, since these tags weren't on the page at the time of the click events being binded, they have no listeners. Bind the click event to the container and target the elements:
$("#content").on("click", ".tag-button", function() {

Toggling the background image of div on click using Javascript

Hi there I am trying to use Javascript to toggle the background image of a div when clicked
This is what I have done to try and achieve this:
My code is as follows
HTML:
<div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1);">
<div class="AccordionTitle" id="Accordion1Title" onselectstart="return false;" onclick="changeArrow(1);" >
Instructions
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
<p>Enter in your search parameters by clicking on the title of... </p>
</div>
<div onclick="runAccordion(2);">
<div class="AccordionTitle" id="Accordion2Title" onselectstart="return false;" onclick="changeArrow(2);" >
Colour
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
[wpv-control field="cultivar-category" type="checkboxes" values="Dark Red" url_param="cultivar-category"]
</div>
</div>
</div>
Javascript:
function changeArrow(index)
{
var arrowID = "Accordian" + index + "Title";
document.getElementById(arrowID).style.background="url(./img/accordian-title-up.png) no-repeat scroll 0 0 transparent";
}
However nothing happens when I click on a div that contains onclick="runAccordion(index);"
What am I missing here?

runAccordion is maybe overriding or blocking changeArrow, depending on the structure of your HTML. Try combining them in the same onclick listener (runAccordion(1);changeArrow(1);) and see what happens there.
Also, if you've fixed this, check your image path.
EDIT
You have a typo:
var arrowID = "Accordian" + index + "Title";
should be:
var arrowID = "Accordion" + index + "Title";

Get specific data from page and write it to div

I'm building an online store with javascript shopping cart. However, the script doesn't allow printing only one or two values when displaying cart, but I need to do this.
Here's what the cart looks like:
<div class="simpleCart_items">
<div>
<div class="headerRow">
<div class="item-name">Tuote</div>
<div class="item-price">Hinta</div>
<div class="item-decrement">-</div>
<div class="item-quantity">Määrä</div>
<div class="item-increment">+</div>
<div class="item-total">Yhteensä</div>
<div class="item-remove">Poista</div>
</div>
<div class="itemRow row-0 odd" id="cartItem_SCI-1">
<div class="item-name">Teipit</div>
<div class="item-price">€0.00</div>
<div class="item-decrement"><img src="css/minus.png" alt="minus">
</div>
<div class="item-quantity">3</div>
<div class="item-increment"><img src="css/plus.png" alt="plus">
</div>
<div class="item-total">€0.00</div>
<div class="item-remove"><img src="css/remove.png" alt="Remove">
</div>
</div>
<div class="itemRow row-1 even" id="cartItem_SCI-3">
<div class="item-name">Car Speaker -hajuste</div>
<div class="item-price">€4.00</div>
<div class="item-decrement"><img src="css/minus.png" alt="minus">
</div>
<div class="item-quantity">1</div>
<div class="item-increment"><img src="css/plus.png" alt="plus">
</div>
<div class="item-total">€4.00</div>
<div class="item-remove"><img src="css/remove.png" alt="Remove">
</div>
</div>
<div class="itemRow row-2 odd" id="cartItem_SCI-5">
<div class="item-name">Teipit (Musta hiilikuitu)</div>
<div class="item-price">€0.00</div>
<div class="item-decrement"><img src="css/minus.png" alt="minus">
</div>
<div class="item-quantity">1</div>
<div class="item-increment"><img src="css/plus.png" alt="plus">
</div>
<div class="item-total">€0.00</div>
<div class="item-remove"><img src="css/remove.png" alt="Remove">
</div>
</div>
</div>
</div>
NOTE: The cart is written via javascript so it isn't visible in page source, only in inspect mode of the browser.
So how would I gather the item-name, item-priceand item-quantity?
I've tried this:
var name = $('.item-name');
var price = $('.item-price');
var quantity = $('.item-quantity');
var data = name + price + quantity;
$('#items').html(data);
But this won't actually do anything.

When doing this -> $('.item-name');
You are just capturing the element as object but not the value.
Now that you got your element as object, you need to extract the value and, in this case, your element object is a div so you can try .text() or .html() (to get the text or html inside the div).
(For this situation I will use text() cause you are working just with values and there is nothing related to html)
Try this:
var name = $('.item-name');
var price = $('.item-price');
var quantity = $('.item-quantity');
var data = name.text() + price.text() + quantity.text();
$('#items').html(data);
Better solution:
This will make clickable the div in which you have the product and match the cartItem_SCI pattern.
So, when user clicks any of the elements of your cart, you will get the name, price and quantity values that will be attached to the $('#items') div using append() method instead of html() (because using this will replace the product information each time the user clicks a div)
$(document).ready(function() {
$('div[id^="cartItem_SCI-"]').css({ cursor:'pointer' });
$('div[id^="cartItem_SCI-"]').click(function() {
var name = $(this).find('.item-name');
var price = $(this).find('.item-price');
var quantity = $(this).find('.item-quantity');
var data = name.text() + ' - ' + price.text() + ' - ' + quantity.text();
$('#items').append(data + '<br/>');
});
});​

You are just getting a reference to the class, add .html() to get the inner html of the element that the class applied to.
var name = $('.item-name').html();

For one item you can get like this.But since you have multiple items make one object like this .
var item={};
$('.item-name').each(function(){item.name=$(this).html()});
$('.item-price').each(function(){item.price=$(this).html()});
$('.item-quantity').each(function(){item.quantity=$(this).html()});
var data='';
for(var i=0;i<item.length;i++)
{
data+=item[i].name+item[i].price+item[i].quantity;
}
$('#items').html(data);