Using jquery 1.8.3
I am creating a function which creates an "li" element and sets some properties, including establishing an event listener.
$(this).closest('a').text(text); //$(this) is the li tag, and it does show that in the browser if you step through
The dom structure looks like this:
<div>
<a></a>
<div>
<ul>...</ul>
</div>
</div>
If you follow it in the debugger, both the .text() method and "text" variable are being populated with the correct info. There is something going on with the assignment part that I can't track. I am sure it is something stupid and obvious I am missing, but I could use some help getting over this hump.
If you need more info, please let me know.
The anchor tag is not the ancestor of the li .. Rather it is a sibling of the div in which it is encased..
You are looking for this I belive
$(this).closest('div').prev('a').text(text);
You have to use html() function from jQuery:
$(document).ready(function(){
$("#element li ").click(function(){
$("#linki").html($(this).html());
});
});
<a href="" id="linki" ></a>
<a></a>
<div>
<ul id="element">
<li>Hello</li>
</ul>
</div>
live example http://jsbin.com/opoqid/46/edit
Related
I've tried a number of things but I cannot get my code to work. I want to change the text of the span containing a number in this code:
<li class="top">
<div class="sec">
<span>123</span>
<span class="inner">Lorem</span>
</div>
</li>
My JavaScript/JQuery:
(function($) {
$(document).ready(function() {
$('li.top .sec').find('span').eq(0).text('cccc');
});
})(jQuery);
I've been able to write code that changes both spans, but not the one.
Your code body appears to work to largely work.
I just tried inserting this line into the doc as follows:
$('li.top .sec').find('span').eq(0).text('cccc');
See http://jsbin.com/leyasiwexu/edit?html,js,output
So, perhaps there is something else that is causing the issue?
console.log($('li.top .sec').find('span').eq(0).text());
$('li.top .sec').find('span').eq(0).text('cccc')
console.log('changed to: ' + $('li.top .sec').find('span').eq(0).text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="top">
<div class="sec">
<span>123</span>
<span class="inner">Lorem</span>
</div>
</li>
(function($) {
$(document).ready(function() {
$('li.top .sec').find('.inner').prev().text('cccc');
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="top">
<div class="sec">
<span>123</span>
<span class="inner">Lorem</span>
</div>
</li>
the .prev() method searches for the predecessor of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.
The method optionally accepts a selector expression of the same type that can be passed to the $() function. If the selector is supplied, the preceding element will be filtered by testing whether it match the selector.
Excerpt taken from the JQuery prev documentation
You can try this:
$('li.top .sec').find('.inner').prev().text('cccc');
I haven't checked, HTML Specifications, but I don't think its appropriate to nest a div inside li. I know you can work your way around presentation irregularities with css, but this might not be permissible with jQuery. Just as I said, I haven't verified. If you have to nest items inside li, use inline elements. div is block
Why will this refuse to work?
HTML stuff
<div id="nav-bar">
<ul>
<li>
<span>
Contact
</span>
</li>
</ul>
</div>
Javascript stuff
$('div#nav-bar').filter('a').click(function(event){
event.preventDefault();
});
Filter only filters what is already selected. In your case, the #nav-bar element.
You need this:
$('div#nav-bar a').click(function(event){
event.preventDefault();
});
filter is the wrong method to use here. you should either use find to look for elements in a selection:
$('div#nav-bar').find('a')...
or simply combine that into one selector:
$('div#nav-bar a')...
after you've fixed that, your preventDefault will actually get applied and work, theres nothing wrong with that piece of code directly.
hi i have this code
html code
<ul>
<input type="button" onclick="appear()"/>
<li id="addQuestionChoices">roma</li>
</ul>
css code
#addQuestionChoices{display:none;}
javascript code
function appear()
{document.getElementById('addQuestionChoices').style.display="block";}
but when i press the button , nothing happend, is javascript doesn't work with LI tag ? or what ?
thank you for answering
The <li> tag must be inside an <ul> or <ol>, and the only allowed children for <ul> and <ol> are <li> tags. This means your <input> should be outside the <ul>:
<input type="button" onclick="appear()"/>
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
just be sure to define the function before, like in this fiddle: http://jsfiddle.net/2dUfa/
<script>
function appear() {
document.getElementById('addQuestionChoices').style.display= "block";
}
</script>
<input type="button" onclick="appear()" value="appear" />
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
As a sidenote: the default display property of a <li> element is list-item (and not block)
It's bad practice to embed JavaScript calls within HTML. It makes the code much more maintainable when the functionality, style and markup are kept seperate. Secondly your <li> element should be nested within either a pair of <ul> or <ol> tags.
I have written a jsFiddle example of how you could tackle this task:
http://jsfiddle.net/dLqja/1/
In this code I have created a 'click' listener, this is attached to your button via its id. Upon the button press it triggers an anonymous callback function which dynamically changes the display style of your 'li' element.
Inclusion of jQuery
Make the following is the first JavaScript that you include in your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
This jQuery script is hosted by Google, which has its advantages such as (it's probably already cached in the clients browser from visiting a previous website using it).
Any JavaScript code which you write which uses the functionality of jQuery should be included after the above script.
None jQuery Version...
You can achieve a similar result as the above by assigning an event listener to the button. This approach is preferable to using onclick="..." as sticks to the rule of seperating functionality from markup. If none of these answers work you should check your browsers console for error messages.
http://jsfiddle.net/SvufY/1/
Try putting the <li> inside of a <ol> or <ul> tag.
You should avoid using inline Javascript code, and instead focus on keeping it separated. Attach your event handler to the object in a script tag (or, better yet, a script file loaded at the end of the document), something like this:
<input id="clickButton" type="button" value="submit" />
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
<script>
document.getElementById('clickButton').onclick = function() {
document.getElementById('addQuestionChoices').style.display="block"
};
</script>
You can see a working example of this at http://jsfiddle.net/xxgdB/
Note also you can use either list-item or inherit in the display field to achieve the same effect.
I have the following dropdown menu how can i redirect each menu to corresponding page by clicking each of menu? is it possible by using one javascript function if yes how?
thanks in advance...
<div>
<ul>
<li id=home onclick="show(this.id)">Home</li>
<li id=collection onclick="show(this.id)>Collection</li>
<ul>
<li id=men onclick="show(this.id)>Men</li>
<li id=women onclick="show(this.id)>Women</li>
</ul>
<li id=contact onclick="show(this.id)>Contact</li>
</ul>
</div>
Yes you can.
Use window.open("URL") in your case URL is this.id
Also you can update window.location
read more here http://www.tizag.com/javascriptT/javascriptredirect.php
Like Niko said you need closing quotes
.. onclick="window.open(this.id)" ..
If you only need o JS function to redirect based on a parameter that, in your case, is the component ID, this will do the work:
<script type="text/javascript">
var show = function(id) {
window.location.href = id + '.jsp';
};
</script>
If you want to navigate DOM and get link's href attribute use:
document.getElementById(id).firstChild.href
Considering that the first element inside the component referred by ID is a link tag.
Try this?
$("div > ul li a").click(function() {
window.location.href += "/" + $(this).parent()[0].id;
});
I tried to use a selector that didn't modify your HTML, so that's why it looks so icky.
This makes no sense.
I understand that your particular functional requirement is to invoke the link when the enduser clicks somewhere in the space of the <li> outside the link. To achieve that just set the CSS display property of the <a> element to block. This way the link will span the entire space of its parent element.
<ul id="menu">
<li>Home</li>
<li>Collection</li>
<ul>
<li>Men</li>
<li>Women</li>
</ul>
<li>Contact</li>
</ul>
with this CSS
#menu li a {
display: block;
}
No need for ugly JavaScript hacks. Opening a new JSP page location in the current window is by the way to performed by window.location = 'some.jsp';. But this is not necessary if you use the right solution for the concrete problem. In the future questions, try to elaborate more about the functional requirement instead of concentrating only on the solution of which you thought that it's the right solution for the particular functional requirement.
This site is overriding my CSS with its own and I cannot get around it! It has style.css with "text-align: center" in the body.
I have <div id="mydiv"> appended to the body and it's normally got "text-align: left". There are <ul>s and <li>s underneath #mydiv and they are inheriting the body's 'center' for some reason. I tried this and it's still not working.
$('#mydiv').children().css('text-align', 'auto');
How the heck do I reclaim my CSS!?
#Grillz, the HTML looks like this:
<div id="mydiv">
<ul class="container">
<li rel="folder" class="category">category1
<ul><li rel="file" class="subcategory">subcategory1</li></ul>
<ul><li rel="file" class="subcategory">subcategory2</li></ul>
</li>
<li rel="folder" class="category">category2
<ul><li rel="file" class="subcategory">subcategory3</li></ul>
<ul><li rel="file" class="subcategory">subcategory4</li></ul>
</li>
</ul>
If you want to do it via jQuery, your .children() is only selecting the <ul>, not the <li>... You need to do something like this:
$('#mydiv').children().children().each(function() {
$(this).css('text-align', 'left');
});
Firstly, its drilling down two levels, down to the <li>. Secondly its using the .each() function to apply the css styling to each child...
EDIT: after seeing your html above, below is probably more appropriate:
$('#mydiv').find("li").each(function() {
$(this).css('text-align', 'left');
});
This uses the .find() function to find every <li> element inside #myDiv.
Working jsFiddle (with color instead of text-align) here: http://jsfiddle.net/Damien_at_SF/Vabvu/
Hope that helps :)
All you need is a more specific css rule. Something like this will set text alignment to left for all the children of #mydiv.
body #mydiv * {
text-align: left;
}
Try without children() function
$(document).ready(function(){
$('body').css('text-align', 'left !important');
});
and I'm guessing you trued to insert <UL/> and <LI/> in your example. you need to define them as code for them to show up