My DOM looks like this:
<li id="li1">
<div class="c1"></div>
</li>
<li id="li2">
<div class="c1"></div>
</li>
Using jQuery, if the first <li> is clicked, I want the inner <div></div> to be hidden.
$("li:first").click(function() {
$(this).children("div").hide();
});
You will run into problems when ID'ing 2 list items as the same ID. If you want the same CSS to apply to both, use classes instead.
this might work for you:
note: make sure you include the jquery.js, i was lazy and didnt put it in here.
<html>
<head>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$(".clickableLI").click(function(){
$(this).find("div").hide();
});
});
</script>
</head>
<body>
<ul>
<li class="clickableLI">
<div class="c1"></div>
</li>
<li class="clickableLI">
<div class="c1"></div>
</li>
<ul>
</body>
</html>
Having two identical IDs is invalid xHTML
Not sure about the exact jQuery syntax
but in sudo code would be something like:
li1 addEvent('click')
{
get child of li1, filter by class c1
set style on child(display, none)
}
Related
<div class="box">
<ul class="test">
<li>test1</li>
<a class="add">test2</a>
</ul>
</div>
Above my HTML content coming dynamic. I want to add li tag in my test2 anchor link in JQUERY.
Here I have tried-
$('.box .test li:first-child').after('<li>');
But this li tag creating in wrong place. But I want my output should be like this -
<div class="box">
<ul class="test">
<li>test1</li>
<li><a class="add">test2</a></li>
</ul>
</div>
The best and correct way would be to fix your source html! A a tag inside a ul element is not valid. So your first task should be to get a correct html output.
If not possible you could use a :not selector and wrap(). So every child element, which is not a li, will be wrapped with a li element. This keeps it dynamic ...
$('ul > *:not(li)').wrap('<li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<ul class="test">
<li>test1</li>
test2
<strong>test3</strong>
</ul>
</div>
The problem is with your initial HTML, since an a element can't be a direct child of a ul element. Try to fix this in you initial rendering, and not later using javascript, simply for the reason that different browsers will act differently upon invalid HTML fragment (auto-fix it, drop it, you name it...).
Having said that, in general $('selector').wrap('<wrapperElement />') is the traditional jQuery's way of wrapping an existing element with a newly created one.
Below code will wrap li tag around a tag having class add.
$("a.add").wrap("<li>");
$(document).ready(function(){
$("a.add").wrap("<li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<ul class="test">
<li>test1</li>
<a class="add">test2</a>
</ul>
</div>
you're actually looking to add an element as a parent of another one, use Jquery wrap function instead:
$(".add:eq(0)").wrap("li")
Basically I have a structure like this
<ul>
<li class="menu-parent">
<ul class="tier-two">...</ul>
</li>
<div class="square"></div>
<li class="menu-parent">
<ul class="tier-two">...</ul>
</li>
</ul>
What I want is to have an event-handler that when I click on div.square shows the ul.tier-two in front of it. I have tried to use closest() but somehow it's not working.
$("div.square").on("click", function(){
$(this).next("li.menu-parent").find("ul.tier-two").show();
});
use $('.square').prev('li').find('ul.tier-two') with jQuery if you want.
hope it helps.
I'm really new at trying to use jQuery, so please forgive me for asking what is likely a simple question. Perhaps it isn't even related to jQuery, but anyway, here's the scenario. I'm trying to put in a hidden div which I only want to show up when the user hovers their mouse over the Learner's anchor tag on the page. I've started with only one anchor tag, to get it working first before implementing the rest of them. I've downloaded a jQuery library and included a reference to it, so here's some of what I've got in my page's head section:
<script src="js/jquery-1.11.1.js" type="text/javascript" ></script>
<style type="text/css">
#navcontainer ul { list-style-type: none; }
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration:none;
padding: .2em 1em;
}
</style>
Next I've defined an unordered list, using the styling above to make it horizontal, and I've got a hidden div after it, which I want to show when the user moves their mouse over the first anchor in the unordered list. Here's the relevant HTML from within the body tag:
<body>
<div id="navcontainer">
<ul>
<li>Home</li>
<li>Learners</li>
<li>Teachers</li>
<li>Businesses</li>
<li>Contact Us</li>
</ul>
<div id="dropdown1" style="visibility:hidden;">
<ul>
<li>Description A</li>
<li>Description B</li>
<li>Description C</li>
</ul>
</div>
<!-- other HTML code -->
</body>
However, when I run this from within the browser (IE11) nothing happens. Using the F12 web developers tools built into IE11 I learn that it giving an error of "showHide is undefined". Why is it doing that? The showHide() function is most certainly in the jquery-1-11.1.js file, which most certainly is in my js folder. What have I done wrong, or failed to take into account?
jQuery works kinda different than that. You have to make it look like this:
$("#dropdown1").toggle()
You better make a javascript file and separate the JS from the HTML:
HTML:
<body>
<div id="navcontainer">
<ul>
<li>Home</li>
<li>Learners</li>
<li>Teachers</li>
<li>Businesses</li>
<li>Contact Us</li>
</ul>
<div id="dropdown1" style="visibility:hidden;">
<ul>
<li>Description A</li>
<li>Description B</li>
<li>Description C</li>
</ul>
</div>
<!-- other HTML code -->
</body>
The JS
$(function(){
$("#navcontainer li a").click(function(){
if( this.href.indexOf("#") != -1 ) {
$( $(this).attr("href") ).toggle(); // $( "#container1" )
}
});
});
What this does is on the navcontainer li click, we make a handler, which does something if it contains a #. Then we select that element #container1 which is in the href, also is the selector for the element which we want to show. And we toggle that element.
There is no such function as showHide you could use toggle() or show() or hide()
in you current scenario uou would couple them with $(this). or your chosen selector.
As an example of targetting a particular element with jQuery we have added the class hover-learners and target it with the selector below.
HTML:
<div id="navcontainer">
<ul>
<li>Home
</li>
<li>Learners
</li>
<li>Teachers
</li>
<li>Businesses
</li>
<li>Contact Us
</li>
</ul>
<div id="dropdown1">
<ul>
<li>Description A
</li>
<li>Description B
</li>
<li>Description C
</li>
</ul>
</div>
Add the below javascript as a file or within <script type="text/javascript"> code here</script> after including your jQuery library file.
Javascript:
// wrap everything in jQuery's ready function to make sure the page has fully loaded before executing the javascript
$(document).ready(function () {
//select learners and apply mouseover event
$('.hover-learners').on('mouseover', function () {
$('#dropdown1').show();
});
//select learners and apply mouseout event
$('.hover-learners').on('mouseout', function () {
$('#dropdown1').hide();
});
});
Also since the show and hide methods manipulate the display CSS property I have added
CSS:
#dropdown1 {
display:none;
}
and remove the inline style="visibility:hidden" from the #dropdown1
Working demo here: http://jsfiddle.net/robschmuecker/J6U7d/
I've been trying to find a method on moving the TOC in MediaWiki to the sidebar or any location really that I want it outside of the main content but with no success.
The simplest looking solution brought up the following but it doesn't seem to actually move the TOC.
<div id="toc_sidebar_holder"> </div>
<script type="text/javascript">
var toc = document.getElementById('toc');
var toc_holder = document.getElementById('toc_sidebar_holder');
if(toc && toc_holder){
toc.parentNode.removeChild(toc);
toc_holder.appendChild(toc);
}
</script>
Then here is what the HTML looks like for the TOC currently.
<table id="toc" class="toc"><tr><td><div id="toctitle"><h2>Contents</h2></div>
<ul>
<li class="toclevel-1 tocsection-1"><span class="tocnumber">1</span> <span class="toctext">Cats</span>
<ul>
<li class="toclevel-2 tocsection-2"><span class="tocnumber">1.1</span> <span class="toctext">Type</span></li>
<li class="toclevel-2 tocsection-3"><span class="tocnumber">1.2</span> <span class="toctext">Meows</span></li>
</ul>
</li>
<li class="toclevel-1 tocsection-4"><span class="tocnumber">2</span> <span class="toctext">Dogs</span>
<ul>
<li class="toclevel-2 tocsection-5"><span class="tocnumber">2.1</span> <span class="toctext">Woof</span></li>
</ul>
</li>
</ul>
</td></tr></table>
Really looking for a solution or figuring out how to get the function above to work.
That script looks fine, but if you you test it, you might notice that toc is not assigned.
Put the script at the bottom of your skin, so it is executed when both elements are already available.
I have a div that I wish to hide using jQuery, only if I'm in a certain category, so I want to base the hiding of the div based on my breadcrumbs. I think I have the jQuery right, but it isn't hiding the div?
<div class="breadcrumbs">
<ul class="nav">
<li>Home</li>
<li>Tshirts</li>
<li>Mens</li>
</ul>
</div>
<div class="hide-me">I want to hide</div>
<script type="text/javascript">
jQuery(window).ready(function(){
if(jQuery('.breadcrumbs ul.nav li:nth-child(2)').text() == "Tshirts"){
jQuery('.hide-me').hide();
}
});
</script>
jQuery('.breadcrumbs ul.nav li:nth-child(2)').text()
Is strange, why are you hardcoding this so much? You're specifically asking for that list, and only if it is within a very specific tree.
It would be easier if you just changed your HTML
<div class="breadcrumbs">
<ul class="nav">
<li>Home</li>
<li id="secondlist">Tshirts</li>
<li>Mens</li>
</ul>
</div>
and then
$("#secondlist").text() == "Tshirts";
Check if
$('.breadcrumbs ul.nav li:nth-child(2)').text()
is really getting the value, I think that is the principal problem.