I am trying understand why the .wrap() function in my basic table of contents function isn't working. The function filters headers from a textarea and places them in an iframe, and the basic part works. But whereas my desired output is this:
<ul>
<li class="toc_h2">This is an h2</li>
<li class="toc_h3">This is an h3</li>
<li class="toc_h1">This is an h1</li>
</ul>
What I am actually getting is this:
<ul>
<h2>This is an h2</h2>
<h3>This is an h3</h3>
<h1>This is an h1</h1>
</ul>
How can I fix this/what am I misunderstanding? The code is here and at http://jsfiddle.net/supertrue/JgWxJ/
headers.each(function(i) {
$(this).wrap('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').appendTo(toc);
});
You can change this:
$(this).wrap('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').appendTo(toc);
to this:
$('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').html(this).appendTo(toc);
Here's your fiddle: http://jsfiddle.net/JgWxJ/7/
Alternatively, you could just add .parent() before appending:
$(this).wrap('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').parent().appendTo(toc);
...and here's the fiddle: http://jsfiddle.net/JgWxJ/10/
Related
I found a couple of other questions that were similar but I'm still not getting the needed result.
So I have a list:
<ul>
<li class="class1"></li>
<li class="class2"></li>
<li class="class3"></li>
<li class="class4"></li>
<li class="class5"></li>
</ul>
And then I have a set of dynamically-generated spans with IDs that match those classes.
<span id="class1"></span>
<span id="class2"></span>
<span id="class3"></span>
<span id="class4"></span>
<span id="class5"></span>
I need to append each of those spans to their matched list item. So .class1 to #class1. I figured there would be something easy like:
$(this).find('#' + this.className).appendTo(this);
Any suggestions?
$("li[class^='class']").on("click", function(){
$("#"+ this.className).appendTo(this);
});
jsBin demo
NOTE: your code will break as soon you add another class to your element:
<li class="class2 something"></li>
cause than you'll be erroneously searching for an ID element called #class2 something.
You'd better go using data-* attributes instead of class names.
$("[data-get]").on("click", function(){
$("#class"+ this.dataset.get).appendTo(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-get="1" class="class">1</li>
<li data-get="2" class="class">2</li>
<li data-get="3" class="class">3</li>
<li data-get="4" class="class">4</li>
<li data-get="5" class="class">5</li>
</ul>
<span id="class1">s1</span>
<span id="class2">s2</span>
<span id="class3">s3</span>
<span id="class4">s4</span>
<span id="class5">s5</span>
My solution, if I understood correctly:
$(function() {
$("span[id^='class']").each(function() {
var liObj = $("li[class='" + this.id + "']");
if (liObj.length == 1) {
$(this).appendTo(liObj);
}
});
}
Sorry for not posting all of my code. It didn't seem necessary. The answer is:
$( '#' + this.className ).appendTo('.' + this.className);
I knew it was something stupidly simple. Thanks for everyone who responded!
Hello i've been trying to change the content of a div using jquery and i have the following problem, this is my code:
<div id="pages">
<div id='cssmenu'>
<ul id="themenu">
<li class='active'><a href='#'><span>Home</span></a></li>
<li class=''><a href='#'><span>Modules</span></a></li>
<li class=''><a href='#'><span>Degrees</span></a></li>
<li class=''><a href='#'><span>About us</span></a></li>
</ul>
In the js.js :
var Modules = "<p> 12346 </p>";
var Degrees = "<p> degrees </p>";
$(document).ready(function() {
$('ul#themenu li').click(function() {
$('li.active').removeClass('active');
$(this).addClass('active');
**$('#content').html(Modules);**
});
What I am trying to do is have the content changes accordingly with the variable that matches the ul's list items span name, if you can think of a better way to do this please let me know, thank you in advance, Chris.
If I understood you correctly, you are trying to use the name of the menu item to determine which content to use. I would save it in an object like this:
var text = {
Modules : "<p> 12346 </p>",
Degrees : "<p> degrees </p>"
};
and then for the click:
$('ul#themenu li').click(function() {
var section = $(this).find("span").text();
$('li.active').removeClass('active');
$(this).addClass('active');
$('#content').html(text[section]);
});
FYI, it would probably be cleaner not to use the .text() but rather to add an ID or class to the li and key off of that.
I believe you need to map your JS data to your HTML elements somehow. An easy way is to attach a class or an ID to your elements so you can access it directly, Right now it would include getting the text of your span tag then accessing your global data using that value
Using current model in your on click function
var key = $(this).find('span').text(); // Modules
window[key] // var Modules = "<p> 12346 </p>"
Using id and storing data in object:
<div id="pages">
<div id='cssmenu'>
<ul id="themenu">
<li class='active'><a href='#'><span>Home</span></a></li>
<li id="Modules" class=''><a href='#'><span>Modules</span></a></li>
<li class=''><a href='#'><span>Degrees</span></a></li>
<li class=''><a href='#'><span>About us</span></a></li>
</ul>
then you can easily access modules using the id $('#Modules')
If you need to make handling clicks completely generic you could create an object and have properties corresponding to the elements id
var DATA = {
'Modules': 'darfdsa';
}
HThen on click
DATA[$(this).attr('id')];
See output by clicking last tree links ,You can do something like this
var Modules = "<p style='color:red;'> 12346 </p>";
var Degrees = "<p style='color:green;'> degrees </p>";
var Aboutus = "<p style='color:yellow;'> About us</p>";
$(document).ready(function() {
$('ul#themenu li').click(function() {
$('li.active').removeClass('active');
$(this).addClass('active');
//alert($(this).find('span').text().replace(/\s+/g, ""));
$('#content').html(window[$(this).find('span').text().replace(/\s+/g, "")]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pages">
<div id='cssmenu'>
<ul id="themenu">
<li class='active'><a href='#'><span>Home</span></a></li>
<li class=''><a href='#'><span>Modules</span></a></li>
<li class=''><a href='#'><span>Degrees</span></a></li>
<li class=''><a href='#'><span>About us</span></a></li>
</ul>
<div id="content"></div>
Well just try:
$('#content').html(Modules);
Use the HTML DOM innerHTML Property to change elements content.
Or just using javascript and getElementById property:
document.getElementById("content").innerHTML=Modules;
I have a li in a ul like following.
<li class="list-group-item" data_id="1909" id="1909"><input type="checkbox" class="checkboxes" value="1909" name="Navigate Window">Navigate Window</li>
I tried to change a text of this li with the following code.
$('#list1 #' + selectedId).text('abcd');
Using this code, the text is changing fine. But it losts the input inside the li. How do I prevent the replacing whole li?
And also I tried with the following in stackoverflow.
change just text in li that contains img
And i tried it like following,
$("ul.list-group > li.list-group-item > span.thetext").html('abcd');
My ul class is list-group. But i failed. How can do this?
Thanks in Advance!
The easiest solution is to wrap the text within a span then change the contents of the span using a selector like
var selectedId = '1909';
$('#list1 #' + selectedId + ' span').text('abcd');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list1">
<li class="list-group-item" data_id="1909" id="1909"><input type="checkbox" class="checkboxes" value="1909" name="Navigate Window"><span>Navigate Window</span></li>
</ul>
If that is not possible, then based on your markup, you need to change the contents of the last child of your li so
var selectedId = '1909';
$('#list1 #' + selectedId).contents().last().text('abcd');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="list1">
<li class="list-group-item" data_id="1909" id="1909"><input type="checkbox" class="checkboxes" value="1909" name="Navigate Window"><span>Navigate Window</span></li>
</ul>
Try using .append() and wrap the text inside span as shown :
$('#list1 #' + selectedId).append('<span>abcd</span>');
Working Demo
In this example, a jQuery function is presented that when clicked, it prints out the old text and the new text of the element, plus the index of the current element. I'm pretty sure the index must increment (because new elements are being added). But upon testing the code, why is the index showing 0 all the time?
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
Have'nt you heard about w3fools.
I recommend you to follow jQuery official help.
function(index, text)
A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.
The reason here index is always zero is it is only one p element so it always index 0. Lets say you have multiple li in list, on using index:
$( "ul li" ).text(function( index ) {
return "item number " + ( index + 1 );
});
will produce:
<ul>
<li>item number 1</li>
<li>item number 2</li>
<li>item number 3</li>
</ul>
Here is the same example re-written to explain index...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$(".test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$(".test1").html(function(i, origText){
return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";
});
});
});
</script>
</head>
<body>
<p>This is a <b>bold</b> paragraph.</p>
<ul>
<li class="test1" >item number 1</li>
<li class="test1" >item number 2</li>
<li class="test1" >item number 3</li>
</ul>
<p class="test1">This is another <b>bold</b> paragraph.</p>
<button id="btn1">Show Old/New Text</button>
<button id="btn2">Show Old/New HTML</button>
</body>
</html>
I'm studying on W3schools right now and had the same question. Googling led me to this question and the answers are kind of cryptic. after fiddling with the code i found this and thought someone else might need a clearer answer.
With this code:
<ul data-role="listview" id="routelist" data-theme="g">
<li id="firstlistitem" style="display:none;">
$("<li><a href='http://www.google.co.uk'></a></li>").text('content').insertAfter($("#firstlistitem"));
and see also this jsFiddle: http://jsfiddle.net/6MW2e/
How come I end up with an unlinked list item? How can I insert an element with a link?
thanks!
Because you're setting the text of the outer element (the <li>) and not the inner element (the link).
If you're going to keep that syntax, you could try:
$('<li></li>')
.append(
$('').text('content'))
.insertAfter($('#firstlistitem'));
It seems to me that it would be much cleaner if you simply did:
$('<li>' + content + '</li>')
.insertAfter($('#firstlistitem'));
Your overwriting the text of the <li> when you call .text("content")
$("<li/>", {
html: $("<a/>", { href: "http://www.google.co.uk", text: content })
}).appendTo("#routelist");
http://jsfiddle.net/hunter/6MW2e/5/