We Keep Coding

send that specific element which is triggered by onClick function

This is my HTML :
<li class="custom-bottom-list">
<a onClick="upvote(this)"><i class="fa fa-thumbs-o-up"></i><span>upvote</span></a>
</li>
My javascript function Upvote :
function upvote(el){
$(el+' i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');
console.log( event );
}
Basically i want to select and change the css of the 'i' tag inside the particular element which is clicked.
What its doing now is its changing the css of all 'i' tags present in the page.
Can somebody tell me a efficient way to do this?
PS - I tried onClick="upvote(event) and $(event.target).removeClass('fa-thu..
But this works only when I click the 'i' tag. When i click the span tag it changes the span's css!

You can't glue different selectors like that together.
el does not contain a string selector, so you need to use the jQuery library to traverse to the i element.
If you were to console.log(el) you would see why that selector wouldn't work.
Use .find:
$(el).find('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');
Another method (although slower, and more limited because it only travels one level in the DOM):
$(el).children('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');
And, as #newboyhun pointed out, another way is to provide context to the selector:
$('i', el).removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

use find() to get child
$(el).find('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');
or you can find child using class like below
$('.fa-thumbs-o-up',el).removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');
u can try children() too
$(el).children('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

$(el).find('i').removeClass('fa-thumbs-o-up').addClass('fa-refresh fa-spin');

You can try this
if you want to custom CSS
$(el).find('i').css({'color' : 'black'});
if you want to add or remove Class
$(el).find('i').removeClass('fa-thumbs-o-up').addClass("fa-spin");

Select LI children from a not none-displayed UL

The title sounds strange but what I want to achieve is simple.
In a tree of uls I want to get all li children from any ul that have not the - inline - style display: none. So I found this post and I mixed with the negation function :not(). The result was:
'ul:not([style*="display: none"]) .k-item'
Where .k-item is a common class for all my li elements. That selector worked in this simple fiddle. The problem is that it doesn't works in my application. I have a screenshot of some console commands that will illustrate my scenario:
As you can see on second command, it returns some li elements that lies under an ul which haves display: none among other attributes in its inline style. Example of those unexpected li with attribute data-uid with values starting with 099d, bbca and 14d2.
I don't know what I'm doing wrong or if exists a better selector for that purpose.

I would suggest using jQuery's :visible rather than looking for something in the style string and string matching in the style string could be problematic.
$("ul:visible .k-item")

First of all get all the li and check whether its parent (ul) is visible.
jsfiddle
$('li', '#layers').each(function(){
if($(this).parent().is(":visible")){
alert($(this).text())
}
});
OR
a neat version
jsfiddle
$(".k-item:visible").each(function(){
alert($(this).text())
});

Try using
$('ul:not([style*="display: none"]) li.k-item').each(function() { alert($(this).html()) });
HTML
<ul style="display: none">
<li class="k-item">1</li>
<li class="k-item">2</li>
<li class="k-item">3</li>
</ul>
<ul>
<li class="k-item">4</li>
<li class="k-item">5</li>
<li class="k-item">6</li>
</ul>
Fiddle: http://jsfiddle.net/3M2ZM/

Get Text Of Closest Parent H4 Using Jquery

I have several of these html blocks on a page in this structure
<div class="listing">
<h4>Some test Entry here</h4>
<div class="entry clearfix">
<a href="#" class="btn">
Text Here
</a>
</div>
</div>
I have the click event on the '.entry .btn' which is firing fine. But I want to get the inner text of the 'H4 a' within the same listing block as the btn I clicked. I have tried the following but just cannot seem to get the H4 text.
var getTitle = $(this).parents("h4").first();
alert(getTitle.html());
I have also tried closest() but still cannot get the H4? Any ideas?

closest & parents looks for ancestors. But, h4 is in another children of parent .listing.
Try:
var getTitle = $(this).closest('.listing').find("h4").first();

Firstly You need to traverse upwards in the DOM structure to identify the target element using .parent() or .parents() functions.
For your requirement you dont need the immediate parent hence .parent() is of no use instead you need to use .parents() to get all the ancestors in the DOM and refer the one with class selector .listing & finally traverse inward to find the target element h4.
JS CODE:
$('.btn').on('click',function(){
alert($(this).parents('.listing').find('h4').html());
});
Live Demo # JSFIDDLE
Happy Coding :)

use prev function in jquery
var getTitle = $(this).prev().find("h4").first();
alert(getTitle.html());

How to get text of element but excluding a child of that element?

I have an HTML snippet:
<li class="as-selection-item">
<a class="as-close">×</a>
Rudy Hamilton
</li>
How can I get the value Rudy Hamilton from li.as-selection-item but without getting the value x from within a.as-close?

Solution 1
document.querySelector('.as-close').nextSibling.nodeValue
JSFiddle demo: http://jsfiddle.net/t8Qst/
It uses nextSibling to get the node right after the element with the as-close class.
Solution 2
If you want to get everything inside the li, except the anchor, you can use this:
var li = document.querySelector('.as-selection-item').cloneNode(true);
li.removeChild(li.querySelector('.as-close'));
alert(li.textContent);
You clone the li, remove the anchor from the clone, and just display its text.
JSFiddle demo: http://jsfiddle.net/58pLz/
With jQuery (in case you're already using it), this'd give this:
var li = $('.as-selection-item').clone();
$('.as-close', li).remove();
alert(li.text());

Using jQuery you can use this:
$(".as-selection-item").text();
This will return all the thext inside .as-selection-item and not the html
If you only want the text inside .as-selection-item (not in the anchor) you can use this:
$(".as-selection-item").clone().children().remove().end().text();
This clonese the object, removes the children, and returns the text.
Fiddle

How to get UL's if child attribute using jquery?

i want to know how to get Unorderedlist's first child className. I know the UL's ID. How can i find it with jQuery?
Thanks in Advance!!

Give this a try:
$("#id li:first").attr("class");
where id=the UL's ID.

$('#list > li:first').attr('class')

#troynt made a valuable addition, adding the > in between the id of the ul and the li:first makes sure you only grab the first child of the ul you're targeting and not any li's within the child li's.
This will assure that you only get the first class name of the child LI, if there are multiple class names:
$('#id > li:first').attr('class').split(" ")[0]
That takes the class attribute, splits the string by spaces and returns the first element in the resulting array. If there is only one class name, it'll still work as expected.

$("#ULID li:first").attr("class");
Also, keep in mind that your element can potentially have more than one class.