I would like to obtain an array of all li tags within an element that have a specific class. The problem I seem to get when I run this on my project is it won't give me a reference to all the elements and instead seems to return [prevObject: r.fn.init(1)]. Thanks
const allElements = $('.some-elements li');
console.log(allElements);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<ul class="some-elements">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Try using jQuery instead of $ as some other library may be using $
const allElements = jQuery('.some-elements li');
console.log(allElements);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<ul class="some-elements">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
You could try:
document.querySelectorAll('.some-elements li');
It will return an array of elements.
Related
I built a simple sortable list without sub lists with jquery-ui. How can I add an option to nest an list item without having sub ul's allready
<div id="sorter">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
https://jsfiddle.net/2uup4jdd/
If I add a sub ul with html I can sort it as well but I can't create new ul's / sub list items in the runtime environment.
<div id="sorter">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ul>
<li>Item Sub</li>
</ul>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
https://jsfiddle.net/2uup4jdd/1/
Is there a way to activate that? Any other ideas?
I use the nestedSortable plugin for that. (Demo). Works like a charm.
Thanks that will do the work :)
It seems far more complicated with unlimited nested list items.
Could anyone please let me know what i'm doing wrong.
I have:
//My HTML
<div>
<ul>
<li id="test">Main Item 1</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li>Main Item 2</li>
<li>Main Item 3</li>
</ul>
</div>
//My CSS
.list-in-list {
display:none;
}
//My jQuery
$(document).ready(function() {
$('#test').click(function() {
alert("hello");
});
});
My final goal is to show that none displayed content if you press a list item, so that it expands neatly. However, i can't seem to get that alert() appearing in any way. Should i use an id for all list items in the main list, or is it enough with a class?
/W
you can add .next function to show next ul for any li curreny click by user. you have to change id test to one class name to make effect in all click of main li
HTML would be like
<div>
<ul>
<li class="main">Main Item 1</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li class="main" >Main Item 2</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li class="main">Main Item 3</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</ul>
</div>
and JQuery function is below
$(document).ready(function() {
$('.main').click(function() {
$(this).next(".list-in-list").slideToggle();
});
});
for detail you can check link
Should i use an id for all list items in the main list, or is it enough with a class?
IDs are unique. Your JavaScript code will not work properly if you have multiple identical IDs. If you're planning on adding a similar attribute to all of your list items you'd use a class in this case (and reference it with . instead of #). In this case you'd call the click function using:
$('li.myClass').click(...);
If you only have one list, however, you can simply add the ID to the ul and use the click function as:
$('ul#myId > li').click(...);
Note that it would be marginally quicker with the classes in this case.
You'd then reference your inner ul using:
$('li.myClass > ul.list-in-list');
Or, depending on which of the above you went with:
$('ul#myId > li > ul.list-in-list');
(You'd use > here to select only the direct child. If you used ul#myId li you'd also be selecting the li elements which belong to any inner ul)
Your code works fine I do believe you have not included Jquery on your page - or maybe the path to it is not valid. Check your network tab to see if you get an http error retrieving jquery.
You can show the hidden li by doing the following:
$(document).ready(function() {
$('#test').click(function(e) {
$(this).find('.list-in-list').show();
});
});
Your code works fine:
Demo
In this case classes would be better than ids because Id's have to be unique on your page. You can use classes like in the demo below by adding a class to your outer li elements. Just change the binding from #test to whatever class you give your li elements.
$('.clickAbleLi').click(function(e) {
$(this).find('.list-in-list').show();
});
Demo
You close your </li> tag before your "list-in-list". You should close your </li> tag after your inside list ;) Like this :
<div>
<ul>
<li id="test">Main Item 1
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Main Item 2</li>
<li>Main Item 3</li>
</ul>
</div>
It sholud work but Try moving the ID attribute to the A instead of LI if you experience problems
I need to dinamically assign a .selected class to the element where I click and also remove any other previous class asigned to the clicked element so I can change CSS class. Maybe this code:
$(this).click(function(){
$(this).addClass('selected');
});
works but what happend if I click in any other LI? Any help to get this work?
EDIT:
Ok see this code:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
By default none have any classes but I click in Item 2 then the HTML should transform on this one:
<ul>
<li>Item 1</li>
<li class="selected">Item 2</li>
<li>Item 3</li>
</ul>
but once again if I click in Item 3 then the HTML should transform on this one:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="selected">Item 3</li>
</ul>
This is what I'm trying to do
I'd suggest:
$(selector).click(function(){
$('.selected').removeClass('selected');
$(this).addClass('selected');
});
With regards to the comment left by moonwave99 (below), if you only want to remove the selected class-name from those elements contained within the same parent element:
$(selector).click(function(){
var that = $(this);
that.parent().find('.selected').removeClass('selected');
that.addClass('selected');
});
Though it's worth remembering what element you're clicking, and what the parent will be, for example, clicking on the a in the following HTML:
<ul>
<li>link text</li>
</ul>
Will look within the li for the other .selected elements, and so you should use:
$(selector).click(function(){
var that = $(this);
that.closest('ul').find('.selected').removeClass('selected');
that.addClass('selected');
});
First remove selected class from all li inside ul and then apply class to clicked li.
$('ul li').click(function(){
$('ul li').removeClass('selected');
$(this).addClass('selected');
});
On my travels I discovered that it is not possible to addClass of 'active' to list items in when using bootstrap. So if you are reading this (as I was) wondering why this doesn't work when the classname is 'active' you need to choose something else.
Is it possible, using Javascript and either jQuery or regular expressions, to group multiple sibling list items in HTML as in the example below? I need to convert TikiWiki markup to HTML, and it uses ungrouped lists (just adjacent lines appended with #).
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
<p>Paragraph</p>
<li>Item 2.1</li>
<li>Item 2.2</li>
To this:
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
</ul>
<p>Paragraph</p>
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
I already tried using $("li").wrapAll() and siblings(). Both failed.
There's another approach. Here's the regex I'm currently using to convert TikiWiki lists to HTML list items: replace(/[#](.*)\n?/g, "<li class='numbered'>$1</li>") Is it possible to match repeated patterns, and convert them accordingly to HTML as in this pseudo regex? replace(/repeat([#](.*)\n?)/g, "<ol>foreach(<li class='numbered'>$1</li>)</ol>")
Here is my first hack at it. this might get you going in the right direction
<div id='testList'>
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
<p>Paragraph</p>
<li>Item 2.1</li>
<li>Item 2.2</li>
</div>
<script language='javascript' type='text/javascript'>
$.fn.tagName = function() {
return this.get(0).tagName;
}
$(document).ready(function() {
alert($("#testList").html());
$("li").each(function() {
if ( $(this).parent().tagName() != "UL" ) {
$(this).wrap("<ul></ul>");
// alert($(this).parent().tagName())
}
})
alert($("#testList").html());
});
</script>
The <p> is just hanging out in the middle of a bunch of <li>s, signifying the beginning or end of a group? Then maybe something like this:
$('div#container') // assume you're got it in a container div
.find('p').each( function(){ // each p signifies a new group
$(this)
.prev('li') // walk back to the preceding li
.prevUntil('p') // get the set of elements up to the previous p
.andSelf() // include the current li
.wrapAll('<ul>'); // wrap the set in a ul
});
Here's a working jsFiddle using this approach.
I have two unordered lists, a bit like:
<ul class="list1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="current">Item 4</li>
<li>Item 5</li>
</ul>
<ul class="list2">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
And the goal is, with jquery, to identify which li is marked with the 'current' class and then add a class to the second list to the corresponding li. I just can't think of how to do this.
Thanks.
$('ul.list2 li:nth-child(' + $('ul.list1 li.current').index() + ')').addClass('current');
Or you could make it a little less icky:
$('ul.list2 li').eq($('ul.list1 li.current').index()).addClass('current');
The second one, I like better, now that I get to see them both :-) The tricks here are:
the "eq" filter lets you pick an element from a jQuery list based on an index;
the "index" function lets you find the index of an element relative to its siblings in the DOM
Just simply use this:
var initialIndex = $('.list1 .current').index();
$('.list2 li').eq(initialIndex).addClass('current');
// Find the current item in the first list, remember its text
var textToMatch = $('ul.list1 li.current').text();
// Loop through each li in the second list
$('ul.list2 li').each(function(index, domElement){
var curr = $(domElement);
// if the text matchs the first then add our class
if(textToMatch == curr.text()){
curr.addClass('NEWCLASS');
}
});
EDIT1:This is answering the wrong question, the question has since been clarified I will leave this here as it still seems nice :)
EDIT2: as Per Flex, this is a nicer way to achive the same thing, again not what the question was after.
$('.list2 li:contains("' + // Find an li in list2 which contains
$('.list1 li.current').text() + '")') // the same text as the as the current li in list1
.addClass("NEWCLASS"); // and add our new class to it
$('li.current + li').addClass('yourClass')
edit: misunderstanding of the question
var index = $.inArray($('li.current')[0],$('li.current').parent().children());
$('ul:eq(1) li:eq('+index+')').addClass('selected');