Develop Reference

Get the index of a specific class repeated on the DOM

In my HTML I have a div that is repeated, it is something like this:-
<div class="col-md-3 SeccaoProduto">
<p class="productName"></p>
<p>Quantidade Atual: <span class="quantidadeProduto"></span></p>
<button class="btn btn-default btn-xs IncrementaProduto"><span class="glyphicon glyphicon-arrow-up"></span></button>
<button class="btn btn-default btn-xs DecrementaProduto"><span class="glyphicon glyphicon-arrow-down"></span></button>
</div>
When I click the button that has the DecrementaProduto class, I want to get the specific index of that class, in this case DecrementaProduto is the first time that it appears on my html, I want the index = 0;
In my JavaScript I tried this:-
$(".DecrementaProduto").click(function(){
console.log($(".SeccaoProduto").index(this));
});
But I always get the value = -1 :S
How can I do this?

In your code $(this) refers to the clicked button but the collection does not include the button so the returned value would be -1.
Instead, you need to get the parent element .DecrementaProduto which contains the clicked element. Where you can use the parent() method to get the element.
$(".DecrementaProduto").click(function(){
console.log($(".SeccaoProduto").index($(this).parent()));
// ------------^^^^^^^---
});

jQuery how to find image upper element

I have the following HTML:
<div class="uploadimage" >
<img src="test.png" />
<div class="form-inline" >
<button type="button" class="fileupload"> <i class="fa fa-folder-open"></i>
<input type="file" class="upload">
</button>
<button type="button" class="btnupload"> <i class="fa fa-cloud-upload"></i> </button>
</div>
</div>
in jQuery I have the following code:
$(".fileupload input").change(function () {
var input = this;
// this works but I think there is a better way
var image = $(this).closest('.form-inline').siblings('img');
});
I already get the image element but Im sure the peformance of that is no good.
Any clue if there is a better way?

There are various ways you could do this,
One of the way is to find the container div in your case which contains relevant img
$(".fileupload input").change(function () {
// this works but I think there is a better way
var image = $(this).closest('.uploadimage').find('img');
});
For your concern of which way could be better,
.siblings() : If you refer the documentation here https://api.jquery.com/siblings/ , this method matches all the specified selector and creates a new elements. This method should be used according to me only when you are going to manipulate an element, like changing css and properties. Internally, ofcourse it might be triggering find to match / get the element.
.closest() : This https://api.jquery.com/closest/ will be better in your case as compare to .sibilings(). It will not create a new element also will find only required element you are trying to search in the DOM.

You could always use Event Delegation to access both the bound element and it's descendants that match the selector. Here is an example of a delegated event that allows me to target different elements from the event object with jQuery.on().
$('.uploadimage').on('change', 'input', function(event) {
console.log(event);
var input = $(event.currentTarget);
console.log(input);
var input = $(event.target);
console.log(input);
var image = $(event.delegateTarget).find('img');
console.log(image);
var image = $(event.delegateTarget.firstElementChild);
console.log(image);
}).find('input').change();
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="uploadimage" >
<img src="test.png" />
<div class="form-inline" >
<button type="button" class="fileupload"> <i class="fa fa-folder-open"></i>
<input type="file" class="upload">
</button>
<button type="button" class="btnupload"> <i class="fa fa-cloud-upload"></i> </button>
</div>
</div>
When the browser triggers an event or other JavaScript calls jQuery's
.trigger() method, jQuery passes the handler an Event object it can
use to analyze and change the status of the event. This object is a
normalized subset of data provided by the browser; the browser's
unmodified native event object is available in event.originalEvent.
For example, event.type contains the event name (e.g., "resize") and
event.target indicates the deepest (innermost) element where the event
occurred.
When jQuery calls a handler, the this keyword is a reference to the
element where the event is being delivered; for directly bound events
this is the element where the event was attached and for delegated
events this is an element matching selector. (Note that this may not
be equal to event.target if the event has bubbled from a descendant
element.) To create a jQuery object from the element so that it can be
used with jQuery methods, use $( this ).

I would usually do like this:
You can add/generate id to the img element, and add a reference to in in the a data attribute of the btn or any other item what has to refer to it. This is easy even if generating these elements in a loop.
HTML
<div class="uploadimage" >
<img id="testimg1" src="test.png" />
<div class="form-inline" >
<button type="button" class="fileupload" data-imgitem="testimg1"> <i class="fa fa-folder-open"></i>
<input type="file" class="upload">
</button>
<button type="button" class="btnupload"> <i class="fa fa-cloud-upload"></i> </button>
</div>
</div>
JS
$(".fileupload input").change(function () {
var input = this
var reference = $(this).data(imgitem); // get id
var image = $('#' + reference); // get DOM element by id
});

Take the value of a child element

I have this structure:
<td class=​"prd-var-price">
​<div class=​"price-total">​
<span class=​"price-unit">​€​</span>
​<span class=​"price-value">​
<span class=​"price-value-int">​1.760​</span>
​<span data-decimalseparator=​"," class=​"price-value-cent">​,00​</span>​
</span>
​</div>​
</td>​
when I write in the console:
a.getElementsByClassName("prd-var-price")
I would to take the value of price-value-int element (1760), I tried with:
$(a.getElementsByClassName("prd-var-price").getElementsByClassName("price-value-int"));
but this not work.

getElementsByClassName returns an array of elements, if you want only the first one (and in your example - you do) you should use a.getElementsByClassName("prd-var-price")[0].getElementsByClassName("price-value-int")[0]
but since you are using jQuery, a simpler approach would be:
$('.prd-var-price .price-value-int');
jQuery uses css selector syntax to grab elements, you'll still get an array if more then one of this class structure exists

You can use jQuery FIND function to achieve your Goal
$(".prd-var-price").find(".price-value-int").text();
Demo

Better to use $('.prd-var-price .price-value-int) instead of using $(a.getElementsByClassName("prd-var-price").getElementsByClassName("price-value-int"));

You might have multiple td with same class.
Better to use parent > child selection with find()
$('.prd-var-price').find('.price-value-int').text();
In each()
$('.prd-var-price').each(function(){
console.log($(this).find('.price-value-int').text());
});
$('td.prd-var-price').each(function(key, value){
console.log($(this).find('.price-unit').text());
console.log($(this).find('.price-value-int').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="prd-var-price">
<div class="price-total">
<span class="price-unit">€</span>
<span class="price-value">
<span class="price-value-int">1.760</span>
<span data-decimalseparator="," class="price-value-cent">00</span>
</span>
</div>
</td>
<td class="prd-var-price">
<div class="price-total">
<span class="price-unit">#</span>
<span class="price-value">
<span class="price-value-int">2.760</span>
<span data-decimalseparator="," class="price-value-cent">00</span>
</span>
</div>
</td>
</tr>
</table>

By using JQuery:
$("tr.prd-var-price").find('div.price-total span.price-value span:first-child").text();

javascript function with document.querySelectorAll plus filter() can't work properly

I want to get rid of those <tr> with <span class="verfied-badge"> inside it using javascript. (please note that I am hoping for a solution that is javascript only, no jquery)
The HTML structure is like this:
<tr class="project-description">
<td colspan="6">
<div class="project-desc-inner">
<div class="project-synopsis">
<p class="trunk8">This is an entry</p>
</div>
<div class="project-verification">
<span class="verfied-badge"> <~~~~~~~~~~ THIS SPAN
<span class="currency-symbol">$</span>
<span class="icon-tick"></span>
Verified
</span>
</div>
<div class="project-actions">
<a href="#">
<button class="btn">LOL</button>
</a>
</div>
</div>
</td>
</tr>
And this is as far as I can come up to:
function showAlert()
{
document.querySelectorAll("tr.project-description").filter(document.getElementsByClassName("verfied-badge")).remove();
alert("Unwanted removed.");
}
What I hope it does is, select all tr.project-description then from those get all with have span.verfied-badge and if it does have it, delete the entire tr
but as it seems, I keep failing :(
Hope somebody can help.
Thanks!

Find all the tr elements you care about, then see if they containing a matched verified-badge span. If they do, burninate remove them.
window.addEventListener('load', function() {
var projectDescriptions = document.querySelectorAll('tr.project-description'),
projectDescriptions = Array.prototype.slice.call(projectDescriptions);
projectDescriptions.forEach(function(el) {
if (el.querySelector('span.verfied-badge')) {
el.parentNode.removeChild(el);
}
});
});
I called Array.prototype.slice on the NodeList returned from querySelectorAll because querySelectorAll doesn't return an array but a NodeList, which is one of JavaScript's irritating (but easy to workaround) "Array-like objects".

how can i find closest span?

let's say i am having fallowing html structure-
<div data-theme="a" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-a">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Select One</span>
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow">
</span>
</span>
<select onchange="selectState(this,'ADDR_SHIP_STATE')" id="ADDR_SHIP_STATE" name="ADDR_SHIP_STATE">
<option>Hi</option>
<option>Hello</option>
<option>How</option>
<option>are</option>
<option>you</option>
</select>
</div>
what i am trying to do is on change of select box, take the text of selected option and place it inside span(replace select one with this data) having class name ui-btn-text
below is the code which i ahve tried so for without any luck
function selectState(id,stateId){
var selectedState = $("#"+stateId+" option:selected").text();
$(id).closest("ui-btn-text").text(selectedState);
}
Please suggest me how can i do this..

.closest()ref will progress up the DOM but won't get down like .parents() does (btw, you didn't add the . (dot) for the class search but this is probably a typo)
Here is a try:
$(id).parent().find(".ui-btn-text").text(selectedState);

Try -
function selectState(id, stateId) {
var selectedState = $("#" + stateId + " option:selected").val();
$(id).parents('div').find(".ui-btn-text").text(selectedState);
}
This will -
Find the parent 'div' of the 'select' element
Use find to get the .ui-btn-text element contained in the parent div
Demo - http://jsfiddle.net/H2pea/1

Using attributes like onchange is not really unobtrusive way if you use jQuery. This is better:
$('#ADDR_SHIP_STATE').change(function() {
$(this).prev().find('.ui-btn-text').text($(this).val());
});