Develop Reference

using $(this) properly in jquery

$(".gear_listing").hover(function(){
$(".overlay_gears").show();
},function(){
$(".overlay_gears").hide();
}
);
above is my jquery code,as u can imagine i am trying to show .overlay_gears div when .gear_listing div is hover,the above code works just fine.the problem is i have many number of .gear_listing divs and many number of .overlay_gears div,when i hover on any div called .gear_listing all the .overlay_gears div is shown which i dont want.i just want to show the .overlay_gears div under that .gear_listing div.i know i have to make use of $(this).i just don't know how.
i tried doing this:
$(".gear_listing").hover(function(){
var this=$(this);
this.$(".overlay_gears").show();
},function(){
this.$(".overlay_gears").hide();
}
);
its not working
below is my div structure:
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"></div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
<img src="images/list_one.jpg">
</div>
</a>
</li>
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"></div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
<img src="images/list_two.jpg">
</div>
</a>
</li>
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"></div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
<img src="images/list_three.jpg">
</div>
</a>
</li>

.overlay_gears is children of .gear_listing so use like this
$(".gear_listing").hover(function(){
$(this).children(".overlay_gears").fadeIn();
},function(){
$(this).children(".overlay_gears").fadeOut();
});

Use .find() and .slideToggle() for animation effects or use .fadeToggle()
$(".gear_listing").hover(function() {
$(this).find(".overlay_gears").stop().slideToggle();
});
or
$(".gear_listing").hover(function() {
$(this).find(".overlay_gears").stop().fadeToggle();
});
Fiddle

Use this as the second-argument in selector which is context
By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function.
Internally, selector context is implemented with the .find() method, so $( "SELECTOR", this ) is equivalent to $(this).find("SELECTOR")
$(".gear_listing").hover(function() {
$(".overlay_gears", this).show();
}, function() {
$(".overlay_gears", this).hide();
});

Since overlay_gears is a child element of gear_listing,you can use .find() method
$(".gear_listing").hover(function() {
$(this).find(".overlay_gears").show();
}, function() {
$(this).find(".overlay_gears").hide();
});

Basically, you first needs to hide all .overlay_gears on hover and just needs to show the particular .overlay_gears that is the child of current hovered parent. And then in 'unhover' event you can simply hide all .overlay_gears divs..
HTML:
<ul>
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"> overlay_gears data1 overlay_gears data1</div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"> overlay_gears data2 overlay_gears data2</div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="gear_listing relative">
<div class="overlay_gears absolute"> overlay_gears data3 overlay_gears data3 overlay_gears data3</div>
<div class="gear_description absolute">
<span>afdfdsfds sfd</span>
</div>
</div>
</a>
</li>
</ul>
JQuery:
$(document).ready(function(){
$( ".gear_listing" ).hover(
function() {
$( ".overlay_gears" ).hide();
$( ".overlay_gears", this ).show();
}, function() {
$( ".overlay_gears" ).hide();
}
);
});
Working Fiddle: http://jsfiddle.net/kfopaj7e/
I have just removed <img> tag for testing purpose and added few css in Fiddle for the visual thingy

you can use
$(".gear_listing").hover(function(){
$(this).children('.overlay_gears').show();
}
here we select all elements inside $(this) with required class
http://www.w3schools.com/jquery/jquery_traversing_descendants.asp

pass an event in function like
function(evt){
var th = $(evt.target);
$(th).find(".overlay_gears").show();
}

open block on div click from list of div's in HTML

<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technology closedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
I have list of class="listing-main" and i try to open block class="thelanguage" style="display: none;" on click of class="technology closedlanguage".
But what i need, when i click on class="technology closedlanguage" at that time class change "closedlanguage" to "openlanguage" and style change 'none' to 'block'.
But when i click, only one block open at that time from list of div's
<script type="text/javascript">
$(document).ready(function () {
$('.lsiting-main .closedlanguage').click(function (event) {
event.preventDefault();
var target = $('.thelanguage');
$(target).toggleClass('hidden show');
$('.thelanguage').css('display', 'block');
})
});

I have updated the HTML a bit and also if your willing to use JavaScript then refer the below code, it is working as per your expectation.
Here is the JSFiddle Link: Working JS Fiddle Link
JS Code is :
<script>
document.getElementById("technologyclosedlanguage").addEventListener("click", myFunction);
function myFunction(){
var thelanguage = document.getElementById("thelanguage");
var technology = document.getElementById("technologyclosedlanguage");
thelanguage.style.display="block";
technology.className = "technologyopenlanguage";
alert(technology.className); //class name changed.
}
</script>
HTML Code is :
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technologyclosedlanguage" id="technologyclosedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" id="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
The Language
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
Let me know if it works, and helps you. Happy Coding.

Change your script to:
<script type="text/javascript">
$(document).ready(function () {
$(".closedlanguage").click(function (event) {
var target = $(".thelanguage");
$(target).toggleClass("hidden");
$(".hidden").css("display", "none");
event.preventDefault();
});

Show particular div on click on link for this html hierarchy

This is my .html code
<div class="col-2">
<div class="col-content">
<div class="lt">
<div class="lt-img arch"></div>
</div>
<div class="rt">
<h3>Competitve Prices</h3>
<p>Arch Linux 2012.12 x64</p>
Read more <div class="arrow"></div>
</div>
<div class="clearfix"></div>
<div class="wholebox">
<ul>
<li>Arch Linux 2012.12 x64</li>
<li>Arch Linux 2012.08 x64</li>
<li>Arch Linux 2012.08 x86</li>
</ul>
</div>
</div>
</div>
I have .js file code here ..
$( ".rt a" ).click(function() {
$( ".wholebox" ).slideToggle( "slow" );
return false;
});
Problem : When i click on link it show all div having classwholebox.In .css file i set property to display:none for this wholebox class.How can i show wholebox only for particular link with this hierarchy of HTML code .

$('.rt a').click(function() {
$(this).closest('.col-content').find('.wholebox').slideToggle('slow');
return false;
});

Try sth like following:
$( ".rt a" ).click(function() {
//first look for <div class="col-content"> and find class .wholebox
$(this).parent().parent().find(".wholebox").slideToggle( "slow" );
return false;
});

Give some data-id to your tag and map that id to your "wholebox" class.
Refer below code.
Only need to collect id from <a href="" data-id="1"> and map it to <div class="wholebox**1**">
<div class="col-2">
<div class="col-content">
<div class="lt">
<div class="lt-img arch"></div>
</div>
<div class="rt">
<h3>Competitve Prices</h3>
<p>Arch Linux 2012.12 x64</p>
Read more <div class="arrow"></div>
</div>
<div class="clearfix"></div>
<div class="wholebox1">
<ul>
<li>Arch Linux 2012.12 x64</li>
<li>Arch Linux 2012.08 x64</li>
<li>Arch Linux 2012.08 x86</li>
</ul>
</div>
</div>
</div>
$( ".rt a" ).click(function() {
$( ".wholebox"+($(this).attr("data-id")) ).slideToggle( "slow" );
return false;
});

How to listen click event and when clicked find parent div?

If I have html like this
<div class="col-xs-3">
<h2>A</h2>
<div class="abc">
<div class="def"><a class="btn"></a></div>
<h3>B</h3>
<p><a class="btn">C</a></p>
</div>
</div>
How can I listen click event on <a class="btn">C</a> and than find value of <h2>A</h2> (A)?
Here is my try
$(document).on('click', '.btn', function (event) {
var btn = event.target, container;
container = $(btn).closest('h2');
window.console.log(container);
event.preventDefault();
});

$('.btn').on('click', function() {
alert( $(this).closest('.abc').prev().text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-3">
<h2>A</h2>
<div class="abc">
<div class="close"><a class="btn"></a></div>
<h3>B</h3>
<p><a class="btn">C</a></p>
</div>
</div>

Div is added to repeat

I started some time studying javascript, and I have some questions and was wondering if you can do this.
I have a div:
<div class="category"> </div>
it automatically repeats everytime I create a new category in a forum system. this is default "so there is no possibility to manually"
So wanted it to be added numbering for each category. thereby:
<div class="category1"> </div>
<div class="category2"> </div>
<div class="category3"> </div>
<div class="category4"> </div>
and so on, all this through jquery or javascript.
If it is possible what is the way?

jQuery solution:
$( ".category" ).each( function( index ) {
$( this ).addClass( "category"+(index+1) );
});
Result:
<div class="category category1"> </div>
<div class="category category2"> </div>
<div class="category category3"> </div>
<div class="category category4"> </div>
Solution 2:
$( ".category" ).each( function( index ) {
$( this ).removeClass( "category" ).addClass( "category"+(index+1) );
});
Result:
<div class="category1"> </div>
<div class="category2"> </div>
<div class="category3"> </div>
<div class="category4"> </div>
FIDDLE

HTML
<button id="category-button">Add Category</button>
<div id="category-container"></div>
Javascript
$('#category-button').on('click', function() {
var $container = $('#category-container'),
$elem = $('<div/>', {
"class": "category" + ($container.children().length + 1)
});
$container.append($elem);
});