Why dose the following not obey formatting, the "li"s have no effect
<script>
function showENQ() {
jQuery('#enqtext').html("<li>showtext</li>");
}
$('#enq').live('pageshow', function () { showENQ(); });
</script>
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search Enquirylist..."
data-theme="e" data-filter-theme="d" >
<div id="enqtext"></div>
</ul>
try innerHTML instead:
jQuery('#enqtext').html("<li>showtext</li>");
or
jQuery('#enqtext').append("<li>showtext</li>");
I'm not 100% sure but my first idea is that you are placing the <li>'s into a div and not directly into the list itself.
Might work if you append to the ul by giving it an id, e.g.
<ul id="list" ... >
and then do
function showENQ() {
jQuery('#list').append("<li>showtext</li>");
}
Also might be worth changing enqtext to a span instead of a div and finally, check that you are not changing the style of the list items, i.e. make sure you are not doing list-style:none; anywhere in your css.
Try changing:
jQuery('#enqtext').html("<li>showtext</li>");
to:
$('#enqtext').append("<li>showtext</li>");
Edit : Come to think of it, I would remove the Div of ID #engtext completely and give the ID #engtext to your ul.
Related
I have the following HTML:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
and the following jQuery code:
$('> ul li', body).each(function()
{
$('</ul><ul>').insertBefore($(this));
});
This code should insert a closing tag followed by an opening tag for an unordered list in front of each list item, but instead it inserts <ul></ul>. These are the wrong way around! Why does jQuery do this and does anyone know how to solve this problem?
wrap each li in a ul and remove original outer ul
$('ul li').wrap('').end().find('ul').unwrap('ul');
Final html:
<body>
<ul><li></li></ul>
<ul><li></li></ul>
<ul><li></li></ul>
</body>
In action: http://jsfiddle.net/ZyMNn/
After a prompt to rethink a bit, simpler should work:
$('ul').find('li').wrap('<ul/>').parent('ul').unwrap();
Updated fiddle: http://jsfiddle.net/ZyMNn/2/
jQuery is not about inserting HTML markup somewhere. It is about manipulating the DOM - and to do that, $('</ul><ul>') will somehow get parsed to an element which then gets insertedBefore(this). Since </ul><ul> is invalid markup, your browser does its best when trying to parse it and comes up with <ul/> then, which gets inserted in your document.
jQuery will always fix invalid HTML.
$('</ul><ul>')
That is invalid. You can't start HTML with an end tag. Think of that string a tiny little HTML document. It has to be valid.
I'm a little confused on what you are trying to do? Are you trying to change.
<ul>
<li></li>
<li></li>
<li></li>
</ul>
into this?
<ul><li></li></ul>
<ul><li></li></ul>
<ul><li></li></ul>
If so, then maybe something like this.
var list = $('> ul', body);
var x = $('<div>');
$('li', list).each(function(){
x.append($('<ul>').append($(this)));
});
list.html(x);
I'm trying to make an JS, but since I'm not an expert on that, maybe someone could help me. I was searching for that in Google and in Stack Overflow, but didn't find what I need. I just found onmouseover that change the class in element itself. But I want something different:
I want to make a onmouseover on a tag to change the class closed to open in other element. Example:
Link
<ul class="dropdown closed"><li>Item</li></ul>
Regards,
If you include jQuery:
Add id for your elements:
Link
<ul class="dropdown closed" id="ul1"><li>Item</li></ul>
Javascript:
$("#a1").mouseover(function(){
$("#ul1").addClass("open").removeClass("closed")
})
You can use Link
And JS:
function changeClass() {
document.getElementById("other-element").className = "open";
}
More advanced JSFiddle: http://jsfiddle.net/eRdHJ/1/
<a href="#" onmouseover=$("ul.dropdown").addClass("open").removeClass("closed")>Link</a>
<ul class="dropdown closed"><li>Item</li></ul>
Here is the jsfiddle : http://jsfiddle.net/eRdHJ/2/
This will access the first <ul> on the page. To narrow it down you need to do a getElementById first to get the elements based on tag name from that point. It will then only select the children from that tag with that certain ID-name;
<script>
function changeUl() {
// Get the first found UL, anywhere in the body
document.getElementsByTagName('ul')[0].className = 'otherName';
}
</script>
Link
With ID
<script>
function changeUl() {
var wrapper = document.getElementById('wrapper');
wrapper.getElementsByTagName('ul')[0].className = 'otherName';
}
</script>
<div id="wrapper">
Link
</div>
You might want to check if there are any found tho. [0] might trigger an undefined/error if there are no <ul> found.
i'm trying to exclude a class from a jquery function, but I can't seem to get it to work properly. i tried .not() but it didn't seem to be working correctly.
here's the basic structure I have...
<div id='spotList' class='clickableSpot id_117 '>
<div id='leftCheckboxBar'>
<form id='checkboxForm' name='checkboxForm'>
<input type='checkbox' class='spotCheck' unchecked id='117'/>
</form>
</div><!--end leftcheckboxbar-->
<div id='leftCredits'>
<ul class='credits'>
<li id='agencyItem'>Agency: <span class='creditText searchAgency'>Y&R</span></li>
</ul>
</div><!--end leftcredits-->
</div><!--END SPOT LIST-->
Now I have a jQuery function where you can either click on the .spotList checkbox directly or on the .spotList div. It looks like this, and it works properly...
$('.spotCheck, .clickableSpot').click(function(){
/*do stuff*/
});
I don't want the span .creditText to be included in that selector. I can't seem to figure it out. There has to be a way for me to exclude clicking on that span and triggering the function. But I need everything else in the div to be clickable, just not that piece of text within the span.
Any ideas?
You can use target property of the event object:
$('.spotCheck, .clickableSpot').click(function(event){
if (!$(event.target).hasClass('creditText')) {
// do something here
}
});
You can also you stopPropagation method:
$('.creditText').click(function(event){
event.stopPropagation()
})
http://jsfiddle.net/4rBaM/
First I realize ID's should be unique. But right now I can't do much about that. I have a javascript plug-in that is generating ID names and for one page it works great. The issue is in creating another page, it will start over using the same naming convention. For example:
Page 1
<ul id="1">
Page 2
<ul id="1">
So if I am trying to style ul#1 on Page 1 it will also style ul#1 on Page 2. So, any suggestions on how to separate our the two id's? This html is generated by the JS, otherwise I would just attach a class to it.
Thanks.
First, the unique ID suggestion is restricted to a page. It is perfectly fine to have multiple ID's on different pages. The best way to overcome this is to add a ID to the body.
Page1
<body id="Page1">
<ul id="1">
<li></li>
</ul>
</body>
Page2
<body id="Page2">
<ul id="1">
<li></li>
</ul>
</body>
CSS
#Page1 #1
{
//Some style for page 1, ID 1
}
#Page2 #1
{
//Some style for page 2, ID 1
}
Can you attach a class around it ? Have a div or span some other element surround your code that does the generation and assign a class to it.
I'd say you have to use different style sheets on each page if you need different styles for the same ids, but this will be a pain to maintain as you make styling changes.
Alternatively you could you assign a class to one of the page's UL tags and then create a style for that class.
First of all, the plugin is still not generating the correct ids because ids can't be numbers. To answer your question, try to figure out some parent element that might be different between the two pages probably in which case you can use CSS such as this:
#parent ul#1{
/* styles here */
}
#parent2 ul#1{
/* styles here */
}
page1:
<div id="parent">
<ul id="1">
............
page2:
<div id="parent2">
<ul id="1">
............
So you need to find out a some parent element of ul which is not common between the two pages. This is the only possibility that comes to my mind where you have no control over changing the ids or replacing them with classes since they are being generated by the plugin.
You need something to distinguish them if you want them styled separately. If you cannot modify those tag you could probably use some parent container like:
<div id="parent1">
<ul id="id1" />
</div>
<div id="parent2">
<ul id="id1" />
</div>
and then:
#parent1 ul {
...
}
#parent2 ul {
...
}
Also notice that an id cannot start with a number as in your case. You should probably consider switching/modifying this plugin.
One thing I commonly do is attach a class to the body for each page. <body class="home_section"> and then you could style based on that class .home_section ul#1 {}.
Also, IDs must begin with a letter.
I want to know how to get access of this [span class="myclass"] in below html structure..
<ul>
<li class="first">
<span class="myclass"></span>
<div class="xx">
<span></span>
........
</div>
<li >
<span class="myclass"></span>
<div class="xx">
<span></span>
........
</div>
</ul>
Here I need to write one function in [span class="myclass"], but i cant do it using $(".myclass") [I have few issues] I just want to directly access the span itself.How to do this..?
EDIT:the sln by phoenix is working fine..but lets say(just for my knowledge) the structure is
<li >
<span class="myclass"></span>
<div class="xx">
<li>
<span></span>
</li>
........
</div>
</ul>
so why the span inside 2 nd li(which is under div) is not getting the ref, is it bcoz they are not in the same level..if I need to access them do I need to do some thing like
enter code here
$("li").next(".xx").find(li span:first-child )..or something else is there?
Thanks.
$("li span.myclass")
EDIT: Okay then maybe with
$("li span:first") //EDIT: Don't do that. See below.
apparently :first stops after the first hit. So :first-child is the way to go.
which will select the first span in every li-element. But this can be tricky in case you have other li-elements with spans inside...
EDIT: If you can't use the class you already have, maybe assigning an additional class helps?
<span class="myclass newClass"></span>
...
var spans = $("li span.newClass");
EDIT:
As phoenix pointed out
$("li span:first-child")
returns a list with all span elements that are the first child of a li-element. I don't know if jQuery treats textnodes as child nodes. So if you have a space between <li> and <span>, this might be counted as the first-child. So check if you have any whitespace between your elements beside line breaks.
If span is the first child then you can use
first-child
selector
$("li span:first-child");