Develop Reference

How to keep only the first element from a class when cloning with jquery

Each of my divs have a class attributes named remove, the first class has the id: remove_item then the second remove_item_1, the third remove_item_2, etc.
My problem is that i only want to clone first one with the id remove_item and remove all the other one from the clone.
If i do clone.find('.remove'); i am able to gather all the elements with remove class but from there i am kinda lost on how to do that.
Could anyone help ?
Thanks.

You can keep first div by adding :first.
clone.find('.remove:first');

I think I got what you mean
here's an example how to pick the first element of a cloned div:
lets say you have
<ul id="list">
<div id="clone">
<li class="remove remove1">Remove 1 </li>
<li class="remove remove2">Remove 2</li>
<li class="remove remove3">Remove 3</li>
</div>
</ul>
The script to clone the list and remove the first child of the clone goes like this :
<script>
let clone = $('#clone').clone().appendTo('#list');
clone.children().first().remove();
</script>
or you can select the first one by class selection as #Manashree Shah mentioned like this:
clone.find('.remove:first');
The code uses jQuery, you can add this before the script if you haven't already added it :
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

How auto-generate a table of contents

I'm new to JavaScript, and for school I have to automatically make every <\h1> on my page generate into an "ol" with in every "li" a link to the place on my page where that header is placed so in the end I have a table of contents with links on every "li". So I should be able to just write text and not worry about the table of contents. Is there a way to do this without using too complixated code? And preferably not very long so I can understand it.
e.g.
<h1 id="h1-01">Title 1<\h1>
<h1 id="h1-02">Titel 2<\h1>
<h1 id="h1-03">Titel 3<\h1>
<h1 id="h1-04">Titel 4<\h1>
Make this generate like:
<ol>
<li>Title 1</li>
<li>Title 2</li>
<li>Title 3</li>
<li>Title 4</li>
</ol>
edit:
I don't want anyone to make all of my homework, this is just a tiny tiny part of the homework even. What I want to know is how do I make an organized list with list items in javascript without too complicated code. I already found a way to put every header text in a variable.
This is what I have
function generate(){
var titels = new Array();
for(var i = 1;i<10;i++){
var test = 'h1-0'+ i;
titels[i] = document.getElementById(test).textContent;
}
}
-->
</script>
The only problem is now that I have to make a list with these variables, but I haven't found anything usefull on the internet, everything that I've found uses Jquery ir is specific for someone's problem. I would also like a way to count the amount of headers I'm using but tthat's another question. Is it actually even possible to have code that gets literally implemented like I'm writing it?
like:
html.write("<ol>");
for(var i = 1, i<10,i++){
html.write("<il>" + titels[i] + "<\il>");
}
html.write("<\ol>")

I'm not going to do your homework, but will point you in a good direction.
Try building an object containing the id and the title of each entry. From there, you can use that object to build practically anything, including an ordered list.
Of course, you can hard-rewrite the h1 tags into list items, but that's just not the proper way to do it and not something you should learn from.

A start hint:
You could do it with the help of jquery.
Like this HTML:
<ol id=contents></ol>
<h1>Test</h1>
bla bla
<h1> Test2 </h1>
Ble ble ble
Jquery:
$(document).ready(function(){
$("h1").each(function(){
$("#contents").append("<li>" + $(this).html() + "</li>");
});
});

Assign a CSS class to a single existing div class rather than to all of them

I'm not sure if im going about this the right way at all but I'll try to explain what I'm trying to do as best I can.
I have a HTML page which contains a menu. Within that menu there are a number of instances where a specific CSS class is being used. When the page changes, a value is passed via URL which is then used to highlight the selected item and expand a submenu.
The problem I'm having is that when I try to use this value to expand the list at the right point, I cant actually select and add a new CSS class or carry out other operations. Ill post some code below so you can maybe get a better understanding of what I'm talking about and then maybe give an example scenario.
if (param != null) {
$('.menuButton')[paramvalue].addClass('on');
$('.menuButton')[paramvalue].slideDown('normal');
}
Thats the javascript part thats giving issues. In the case above, paramvalue could be replaced by a 0 or a 1 etc. This part is reaching the specific class I want to change. I checked this by adding an id to the HTML and retrieving that using:
alert($('.menuButton')[paramvalue].id);
This returned the correct ID value.
The HTML is as follows:
<div class="menuButton" id="2">Button 1</div>
<div class="subMenu">
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
</ul>
</div>
<div class="menuButton" id="3">Button 2</div>
<div class="subMenu">
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</div>
There is no CSS to go with the id's they were mainly just added for testing. I can post related CSS if necessary but I don't think its part of the problem.
I should mention that, using the following works
$('.menuButton').addClass('on');
so maybe that narrows down the issue.
If you need any other info. just ask.
Thanks for any help.

By using $(selector)[index] you are converting a jQuery object to a DOM Element object which has no addClass method, you can use eq() method instead:
$('.menuButton').eq(paramvalue).addClass('on');
$('.menuButton').eq(paramvalue).slideDown('normal');
You can also chain your methods:
$('.menuButton').eq(paramvalue).addClass('on').slideDown('normal');

Try with:
$('.menuButton').eq(paramvalue).addClass('on');

You can also do:
$('.menuButton:eq('+paramvalue+')').addClass('on');
Which will have a performance gain over selecting all the elements and then cutting them down to just one selected.

Sort one list based on the order of a second list

i'm new to Jquery and am struggling to work out how to solve my problem.
I have two unordered lists, List A and List B. List A is sortable using .sortable({ axis: 'y' }) method. When List A is reordered, i would like to automatically reorder List B (which is not user sortable) to reflect the changes in List A.
I'm struggling to know where to start, if anyone can help, that would be greatly appreciated.
Thanks
Update: Here's some extra code from my page to put things into context.
<div class="cvOverview">
<h4>CV Overview</h4>
<ul class="sortable" id="listA">
<li id="item_1" class="editContent"><span></span>About me</li>
<li id="item_2" class="editContent"><span></span>Personal profile</li>
<li id="item_3" class="editContent"><span></span>Employment history</li>
<li id="item_4" class="editContent"><span></span>Skills & Qualities</li>
</ul>
<p class="backButton editButton"><span>Completed</span></p>
</div>
<div class="cvMainContent">
<h3>Dean Bates</h3>
<ul class="sortable" id="listB">
<li id="item1">
<div class="cvContactDetails">
Some text here
</div>
</li>
<li id="item2">
<div class="cvPersonalProfile">
Some text here
</div>
</li>
<li id="item3">
<div class="cvEmploymentHistory">
Some text here
</div>
</li>
<li id="item4">
<div class="cvSkillsFromJobs">
Some text here
</div>
</li>
</ul>
</div>
The two lists will contain the same items and the same number of items, eventually i'd like to add the functionality where if a list item is deleted or inserted into List A, the a corresponding item is deleted or added to List B.
From a design point of view, List A represents an overview to the user of what's in List B, so they can re-order and change the contents of the simplified list on one side and have these changes reflected in a more detailed list on the other.
Hope this helps.
Thanks again for your help.

Use the update event to sort the other list
$( ".selector" ).sortable({
update: function(event, ui) { ... }
});
Then you need to loop thru' your first list and move the items in your second list, if you supply the HTML / JS we might be able to help you with that.
try jsfiddle.com

Not sure if you are just storing the data as HTML or how complex the model is, but here the idea:
Use the sortable update function:
var userSortbaleList = $('#usersortableList');
var nonUserSortableList = $('#nonUserSortableList');
userSortbaleList.sortable({
axis: 'y',
update: function(event, ui) {
$.each(userSortableList.children(), function(index, html){
/** Need to see html or JS to do sorting */
}
}
});

Here's a complete solution that works with your precise markup:
$('#listA').sortable({update: sortListB});
function sortListB(){
$('#listA li').each(function(){
$('#listB [id=' + $(this).attr('id').replace('_', '') + ']')
.remove()
.appendTo($('#listB'));
});
}
See it in action here:
http://jsfiddle.net/LnvEM/1/
How does it work? One by one, you go through each item in list A in order from top to bottom, remove the corresponding item from list B .remove(), and re-attach it to the back of list B .appendTo($('#listB')). Once you do this for each item in B, the one you started with will be on top, etc.
(Note: added extra text to the items in list B to visually differentiate them and indicate for each which item it tracks in list A. Not necessary for the solution, however.)

Creating a javascript function to switch classes between list elements depending on which one has been clicked

I am trying to create a function to change the class on a series of 5 list elements depending on which has been clicked. The goal is to change the style of the element depending on which one is the current element.
I had tried something like this:
function addClass(obj)
{
obj.className="highlight";
}
and then added this to my elements:
onclick="addClass(this);
but this only added the class to the first element in the list and then did not remove the class when a different one was clicked.
My list elements look like this:
<ul id="circularMenu">
<li id="strategy_link"><h3>Strategy</h3></li>
<li id="branding_link" onclick="addClass(this);"><h3>Branding</h3></li>
<li id="marketing_link" onclick="addClass(this);"><h3>Marketing</h3></li>
<li id="media_link" onclick="addClass(this);"><h3>Media</h3></li>
<li id="management_link" onclick="addClass(this);"><h3>Management</h3></li>
</ul>
When an item is clicked the url changes, maybe this could be the way to set up the function to change classes depending on the url? I am very new with javascript any ideas on how to make this work would be greatly appreciated.
The current way I have it coded is to change each item when hovered, but I would like the change to remain until a different item is clicked. It can be viewed here: http://perksconsulting.com/dev/capabilties.php The items I am referring to are the black dots on the left side of the page.

First, you should use the jQuery addClass() method. You don't need to write your own (your addClass() implementation is buggy, by the way).
Try this:
function selectInList(obj)
{
$("#circularMenu").children("a").removeClass("highlight");
$(obj).addClass("highlight");
}
Then:
<ul id="circularMenu">
<li id="strategy_link"><h3>Strategy</h3></li>
<li id="branding_link" onclick="selectInList(this);"><h3>Branding</h3></li>
<li id="marketing_link" onclick="selectInList(this);"><h3>Marketing</h3></li>
<li id="media_link" onclick="selectInList(this);"><h3>Media</h3></li>
<li id="management_link" onclick="selectInList(this);"><h3>Management</h3></li>
</ul>
Or even better, keep your html clean and let jQuery simplify things:
<ul id="circularMenu">
<li id="strategy_link"><h3>Strategy</h3></li>
<li id="branding_link"><h3>Branding</h3></li>
<li id="marketing_link"><h3>Marketing</h3></li>
<li id="media_link"><h3>Media</h3></li>
<li id="management_link"><h3>Management</h3></li>
</ul>
Then, somewhere in your page:
$(document).ready(function()
{
$("#circularMenu").children("a").click(function() { selectInList(this) });
});

Try this out.
function addClass(obj)
{
$(obj).addClass("Highlight");
}