I'm using jQuery in my current project. I have an list of elements with unique ids. I would like to pick out a particular element and append a new list item after that element. For example, if I have something like:
<ul>
<li id="one">one</li>
<li id="three">three</li>
</ul>
I would like to append <li id="two">two</li> after the list item with an id of one.
Thanks.
$('ul #one').after('<li id="two">two</li>');
Use the imaginatively named after method.
Related
say i have a list
<ul class="ul-1">
<li class="li-1">xx -1</li>
<li class="li-2">xx -2</li>
<li class="li-3">xx -3</li>
</ul>
i then save it as
var list = $('.ul-1').html();
i can populate another element i.e
$('.ul-2').html(list);
but what if I wanted to replace the first list element <li class="li-1">xx -1</li> with another list element, how do I do this using the list variable? thanks
Firstly note that it's generally better practice to work with references to the elements in the DOM rather than serialising them to strings which need to be deserialised again when re-added to the DOM.
In addition, if you work with the li references you can use jQuery to retrieve the first() of them and then replaceWith() to change it as necessary. Try this:
var $list = $('.ul-1 > li');
$list.appendTo('.ul-2');
$list.first().replaceWith('<li>Foobar</li>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="ul-1">
<li class="li-1">xx -1</li>
<li class="li-2">xx -2</li>
<li class="li-3">xx -3</li>
</ul>
<ul class="ul-2"></ul>
can you help me please? similar to this one Add class and insert before div, but I'd like to be able to add the class "act" to a class above, equal to below:
How are:
<ul>
<li id="item1"></li>
</ul>
<ul>
<li id="item2"></li>
</ul>
How do i need:
<ul class="act">
<li id="item1"></li>
</ul>
<ul>
<li id="item2"></li>
</ul>
You should first get the <li> element as it has an id and would be easy to select
const item = document.getElementById('item1')
// Or if you use jquery
const item = $('#item1')
That you can get the parent element which is <ul> and add the class
const parent = item.parentElement;
parent.classList.add('act');
In jQuery you could do it like this.
$('#item1').parent().addClass('act');
For more reference please check this link: https://api.jquery.com/parent/
If you want to add act class for parent of #item1. use like this
(#Jay Marvin submitted already)
$('#item1').parent('ul').addClass('act');
If you want to add act class for all parent ul, use like below
$('li').parent('ul').addClass('act');
Is there a way to search elements based on data attributes?
I have the following code and would like to know how can this be achieved
<UL>
<LI data-relation_id=1/>
<LI data-relation_id=1/>
<LI data-relation_id=1/>
<LI data-relation_id=2/>
<LI data-relation_id=2/>
<LI data-relation_id=2/>
<LI data-relation_id=3/>
<LI data-relation_id=3/>
<LI data-relation_id=3/>
</UL>
On a click event I basically want to find out all the items that belong to a specific data-relation?
function getRelatedObjects(relationId){
//Search all the li's and get the LI
//that have the data-relation_id== relationId
}
Can this be done using jquery?
The data attribute is just an attribute, so you can use the attribute selector.
$('li[data-relation_id='+relationId+']')
You can't search by associated data specifically, but if the data is set by attribute then you can search using the attribute selector:
function getRelatedObjects(relationId){
return $('li[data-relation_id="'+relationId+'"]');
}
JSFiddle
I need to get every element with a specific id, get the parent of the object, and set its ID.
How would I do this?
I have this code:
<li id="edge_top"> </li>
<!-- Menu Items Here -->
<li id="not_selected"><a id="selection_link" href="index.htm">Home</a></li>
<li id="not_selected"><a id="selection_link" href="page1.htm">Subitem 1</a></li>
<li id="not_selected"><a id="selection_link" href="page2.htm">Subitem 2</a></li>
<!-- Menu Items End Here -->
<li id="edge_bottom"> </li>
I need to find all the anchor elements with the id "selection_link", get the parent (the "list item" element [li]) and set its ID to "selected". How would I do this with jQuery? I'll be using the conditioning to determine if the li element will actually be allowed to get the new ID. (if the URL matches the href property of the anchor element).
HTML specification specifies that an ID should only be applied to 1 element. You can't have more then one element with the same ID.
In this case, it's better to use classes.
TO select by class:
$(".classname")...
EDIT: An example based on your code:
<li class="edge_top"> </li>
<!-- Menu Items Here -->
<li class="not_selected"><a class="selection_link" href="index.htm">Home</a></li>
<li class="not_selected"><a class="selection_link" href="page1.htm">Subitem 1</a></li>
<li class="not_selected"><a class="selection_link" href="page2.htm">Subitem 2</a></li>
<!-- Menu Items End Here -->
<li class="edge_bottom"> </li>
<script type="text/javascript">
$(document).ready(function(){
$(".selection_link").parent().removeClass("not_selected").addClass("selected")
});
</script>
You need to use classes for that. In HTML you not allowed to use ID's multiple times.
The id attribute should be unique across your XHTML document, so this question is not really valid.
Although this may work if you really insist:
$("[id=xx]")
$('li a').each(function(){
if ($(window).attr('location').href.match($(this).attr('href'))) {
//example with class
$(this).parent().addClass('selected');
// example with id
$(this).parent().attr('id', 'selected');
}
});
I have a nested list like this:
<ul class="list">
<li class="list_item_type_1">
<ul class="list">
<li class="list_item_type_2">Unnested item</li>
</ul>
</li>
<li class="list_item_type_2">Unnested item</li>
</ul>
With jQuery I want to add a list item before all .list_item_type_2 in the first .list.
I write it like this:
$('.list:first').find('li.list_item_type_2:first').before('<li class="list_item_type_1">Nested list (...)</li>');
This won't work as intended because the script finds the first .list_item_type_2 in the second .list and appends the new code there instead.
How can I keep the search in the first ul and prevent it from entering underlying ul elements?
Cheers!
Firstly, I'd advise constructing HTML that way. Use jQuery to assemble the HTML. It takes care of escaping and all those other useful things:
$("<li></li>").addClass("list_item_type_1")
.text("Nested list (...)")
.prependTo("ul.list:first > li.list_item_type:first");
Also, always use a tag selector ("ul.list") over a naked class selector (".list") where possible. It's much faster on most browsers.
You were so close!
Instead of find(), which searches all descendants, use children(), which only searches children.
Test: http://jquery.nodnod.net/cases/723/run
Maybe try to combine the selector in one expression ?
$('.list:first > LI.list_item_type_2:first').before('<li class="list_item_type_1">Nested list (...)</li>');
The > selector does only match the direct children, as explained in the doc.