JQuery: Find specific element id?

JavaScript
1

How do I find specific element id for “mod_?” when using JQuery

Code below, as you can see all the <span> are hidden.

For example, if I moveover do_2 then id mod_2 should display. How can that be done?


        <div class="task">
        <div id="do_1" class="tasklist"> Task One <span id="mod_1" style="display: none"> Moderator </span> </div>
        <div id="do_2" class="tasklist"> Task Two <span id="mod_2" style="display: none"> Moderator </span> </div>
        <div id="do_3" class="tasklist">  Task Three <span id="mod_3" style="display: none"> Moderator </span> </div>
        </div>
2

Stop using absolute identifiers and use a relative reference instead.

In fact, with all modern web browsers, you don’t even need javascript.

Try this out:


.task div span {
    display: none;
}
.task div:hover span {
    display: inline;
}



<div class="task">
    <div> Task One <span> Moderator </span> </div>
    <div> Task Two <span> Moderator </span> </div>
    <div>  Task Three <span> Moderator </span> </div>
</div>
3

Thanks… That was helpful.

Could you also tell me how to do this using JQuery aswell?

Each <div> must have own unique id.

4

You can still put whatever id’s you like on them. Regardless of what divs they have, that css technique will still continue to work.

5

I have tried your css and it is not actually how I wanted.

When I mouseover on Task One div, it is displaying <span> in all div’s tasks.

It should be displaying in specific div task where i mouseover. So If I mouseover Task 2, display in Moderator in Task 2 only.

does that make sense?

6

Then I suspect that it is not a modern browser that you are using, and that other techniques need to be applied.

You were speaking before about using jQuery, so here is a jQuery-based solution.


.task div span {
    display: none;
}
.task div.hover span {
    display: inline;
}

Please note that the css here differs only in that the full colon before the word “hover” is now a full stop.


$(function() {
    $('.task div').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });
});



<div class="task">
    <div> Task One <span> Moderator </span> </div>
    <div> Task Two <span> Moderator </span> </div>
    <div>  Task Three <span> Moderator </span> </div>
</div>

And all together:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Test</title>
<style type="text/css">
.task div span {
    display: none;
}
.task div.hover span {
    display: inline;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.task div').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });
});
</script>
</head>
<body>
<div class="task">
    <div> Task One <span> Moderator </span> </div>
    <div> Task Two <span> Moderator </span> </div>
    <div>  Task Three <span> Moderator </span> </div>
</div>
</body>
</html>
7

Hi,

I am using this slickbox code, but want to use it for multiple divs with different variables.

<script>
$(document).ready(function() {
	$('#slickbox').hide();
	$('a#slick-toggle').click(function() {
		var newHref = $(this).attr("href"); 
		$('#slickbox_' + newHref).toggle(400);
 		return false;
  	});
});

<a href="1" id="slick-toggle">Toggle the box</a></p>
<div id="slickbox_1">This is the box that will be shown and hidden and toggled at your whim. :)</div>

<a href="2" id="slick-toggle">Toggle the box</a></p>
<div id="slickbox_2">This is the box that will be shown and hidden and toggled at your whim. :)</div>

This works fine in FF but not in IE. I am desperate for some help and would really appreciate any feedback you could give me.

Thanks.

8

If i understand you correctly, then maybe you can do it this way with jQuery

$(".tasklist").hover(function(){
	
	//auto gets the containing div id (in this case: do_1, do_2, do_3)
	var divId = $(this).attr('id');
	
	//then auto gets the span id of its containing div (in this case: mod_1, mod_2, mod_3)
	var modId = $('#'+divId).children('span').attr('id');	
	
	//then we simply SHOW it base on whichever one the user mouseover
	$('#'+modId).show();
	
	


},function(){
	//Whenever the user mouseout then we need to hide the spans again
	//so we practically do the same thing and just hide the span
	
	//auto gets the containing div id (in this case: do_1, do_2, do_3)
	var divId = $(this).attr('id');
	
	//then auto gets the span id of its containing div (in this case: mod_1, mod_2, mod_3)
	var modId = $('#'+divId).children('span').attr('id');	
	
	//then we simply HIDE it base on whichever one the user mouseover
	$('#'+modId).hide();
	
	
	
});