JS
$(document).ready(function(){
groups = $('[id^=id_2_class_]');
$.each(groups, function(key, group) {
inputs = $(group).attr('id');
alert(inputs);
$()
});
})
HTML
<div id="id_2_class_385">id_2_class_385</div>
<div id="id_2_class_386">id_2_class_386</div>
<div id="id_2_class_387">id_2_class_387</div>
<div id="id_2_class_388">id_2_class_388</div>
<ul class="flex-control-nav flex-control-paging">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
Above is my current code, how can I transfer the selector id into another element's class using jquery?
The result should look like the below
<div id="id_2_class_385">id_2_class_385</div>
<div id="id_2_class_386">id_2_class_386</div>
<div id="id_2_class_387">id_2_class_387</div>
<div id="id_2_class_388">id_2_class_388</div>
<ul class="flex-control-nav flex-control-paging">
<li class="id_2_class_385">1</li>
<li class="id_2_class_386">2</li>
<li class="id_2_class_387">3</li>
<li class="id_2_class_388">4</li>
<li class="id_2_class_389">5</li>
</ul>
You already have the IDs, just need to add them to the list items like so
$(document).ready(function () {
groups = $('[id^=id_2_class_]');
groups.each(function (index) {
inputs = $(this).attr('id');
$('.flex-control-nav').find('li').eq(index).addClass(inputs);
});
});
http://jsfiddle.net/jvqq23kv/
Basically just go through each li and add the class
Here you go:
This goes through each one and creates an <li> so it doesn't matter how many you have. It creates dynamically.
$(function(){
$('[id^=id_2_class_]').each(function(){
$('ul.flex-control-nav.flex-control-paging').append("<li id='"+this.id+"'></li>");
});
});
http://jsfiddle.net/pLvopvqL/
Related
I have a list of items and can be removed by clicking.
I need the first item to be the highlight only when there is one item on the list.
I have tried to do that by the click event. However, would it be possible to do it without .click()? (or any other events). The reason is that this list is dynamically interacting with other lists that the list item may change by other functions.
In other words, the list is dynamically changing, could jquery keep checking whether there is only one item on the list (without specifying specific event trigger)?
<ul id="container">
<li>1</li>
<li class="fixed">2</li>
<li>3</li>
<li class="fixed">4</li>
<li>5</li>
</ul>
$('#container').delegate('li', 'click', function() {
$(this).remove();
});
$('#container').click(function(){
if ($('#container').children().length == 1) {
$("#container li:first-child" ).css( "background-color", "#fff2ac" );
}
}
You can do this purely with CSS with a rule that checks if the li is both the :first-child AND the :last-child -
.container li:first-child:last-child {
background-color: red;
}
<h5>List With Many Items</h5>
<ul class="container">
<li>1</li>
<li class="fixed">2</li>
<li>3</li>
<li class="fixed">4</li>
<li>5</li>
</ul>
<h5>List With One Item</h5>
<ul class="container">
<li>1</li>
</ul>
<h5>List With Two Items</h5>
<ul class="container">
<li>1</li>
<li class="fixed">2</li>
</ul>
Following is the code of the Div which is created dynamically.
<div align="right" class="row pagination">
<ul class="pagination pagination">
<li class="prev disabled"><span>Previous Label</span></li>
<li class="active"><span>1</span></li>
<li>2</li>
<li>3</li>
<li class="next">Next Label</li>
</ul>
</div>
When I click any <li> tag, I need to take the href value(eg: /some_url?page=2) of corresponding <li> tag.
$("ul.pagination li").click(function(e) {
alert($(this).attr('href'));
});
In the above code, clicking event is firing but i am getting undefined in the alert.
Please help.
but i am getting undefined in the alert.
Yes because you're trying to alert the href of the clicked li when it has no attribute href.
You need to alert the href of the anchor inside the li using a in your selector, or also using .find() like :
alert( $('a', this).attr('href') );
//Or also
alert( $(this).find('a').attr('href') );
You could also attach the click event directly to the child anchors of the il's like :
$("ul.pagination li a").click(function(e) {
alert( $(this).attr('href') );
});
$("ul.pagination li").click(function(e) {
alert($('a', this).attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="right" class="row pagination">
<ul class="pagination pagination">
<li class="prev disabled"><span>Previous Label</span></li>
<li class="active"><span>1</span></li>
<li>2</li>
<li>3</li>
<li class="next">Next Label</li>
</ul>
</div>
here is a technique very close to what you had:
$("ul.pagination li a").click(function(e) {
alert($(this).attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div align="right" class="row pagination">
<ul class="pagination pagination">
<li class="prev disabled"><span>Previous Label</span></li>
<li class="active"><span>1</span></li>
<li>2</li>
<li>3</li>
<li class="next">Next Label</li>
</ul>
</div>
$(this) inside your function call is referring to li element and not the a. You need to find a inside li and then get the attribute href like this
$("ul.pagination li").click(function(e) {
alert($(this).find('a').attr('href') );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="right" class="row pagination">
<ul class="pagination pagination">
<li class="prev disabled"><span>Previous Label</span></li>
<li class="active"><span>1</span></li>
<li>2</li>
<li>3</li>
<li class="next">Next Label</li>
</ul>
</div>
because elements are created dynamically,
You should provide a selector to the on function:
$(document).on('click', 'ul.pagination li', function(e) {
alert($(this).children('a').attr('href'));
});
children() vs find()
The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well
I've created a list with nesting and added a button to every parent <li> element. The list looks like this:
$("#pr1").append("<button id='bnt-cat13' class='buttons-filter'>expnd1</button>");
$("#pr2").append("<button id='bnt-cat13' class='buttons-filter'>expnd2</button>");
$("#pr3").append("<button id='bnt-cat13' class='buttons-filter'>expnd3</button>");
$(document).ready(function() {
$("button").click(function() {
$('li > ul').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories">
<li>1</li>
<li class="parent" id="pr1">2
<ul class="children">
<li>2.1</li>
</ul>
</li>
<li>3</li>
<li class="parent" id="pr2">4
<ul class="children">
<li>4.1</li>
<li class="parent" id="pr3">4.2
<ul class="children">
<li>4.2.1</li>
</ul>
</li>
</ul>
</li>
<li>5</li>
</ul>
But this one toggles all list, instead of toggling only separate nested list?
How to show/hide only separate nested lists clicking the buttons?
Thanks in advance.
As for the main question - instead of each li > ul elements, you have to toggle only the ul element which is right before a button. So you should use .prev()
$("button").click(function() {
$(this).prev().toggle();
});
$("#pr1").append("<button id='bnt-cat131' class='buttons-filter'>expnd1</button>");
$("#pr2").append("<button id='bnt-cat132' class='buttons-filter'>expnd2</button>");
$("#pr3").append("<button id='bnt-cat133' class='buttons-filter'>expnd3</button>");
$(document).ready(function() {
$("button").click(function() {
$(this).prev().toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories">
<li>1</li>
<li class="parent" id="pr1">2
<ul class="children">
<li>2.1</li>
</ul>
</li>
<li>3</li>
<li class="parent" id="pr2">4
<ul class="children">
<li>4.1</li>
<li class="parent" id="pr3">4.2
<ul class="children">
<li>4.2.1</li>
</ul>
</li>
</ul>
</li>
<li>5</li>
</ul>
Your code has another issue that should be fixed - each button has the same id attribute (bnt-cat13).
The id global attribute defines a unique identifier (ID) which must be unique in the whole document.
Change your function into:
(document).ready(function() {
$("button").click(function() {
$(this).parent().children('ul').toggle();
});
});
I have done coding the first part HTML then JavaScript/JQuery. Now I want to surround the final common list with a UL need to be done using JavaScript/JQuery. So the final common list will be surrounded by two UL instead of one. Eg
Final Outcome
<ul id="CommonLister">
<ul> <!--Need to add this-->
<li class="columnItem">John</li>
<li class="columnItem">Mark</li>
</ul><!--Need to add this-->
</ul>
Current Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul id="listOne">
<li class="columnItem">John</li><!--will be removed and put under CommonLister-->
<li class="columnItem">James</li>
<li class="columnItem">Mary</li><!--will be removed and put under CommonLister-->
</ul>
<ul id="listTwo">
<li class="columnItem">John</li><!--will be removed and put under CommonLister-->
<li class="columnItem">Mark</li>
<li class="columnItem">Mary</li><!--will be removed and put under CommonLister-->
</ul>
<ul id="CommonLister">
<li class="columnItem">John</li>
<li class="columnItem">Mark</li>
</ul>
</div>
$(function() {
$('#run-code').on('click', function(e) {
e.preventDefault();
//What were you doing? nope.
var currentItems = {}; //Blank object
var $mergeColumn = $('#CommonLister'); //Common list reference
$('.columnItem').each(function(i, el) {
var $el = $(el); //Notation I use to differentiate between the regular HTML Element and jQuery element
if (!currentItems.hasOwnProperty($el.html())) {
//Has this name come up before? if not, create it.
currentItems[$el.html()] = []; //Make it equal to a brand spanking new array
}
currentItems[$el.html()].push(el);
//Add the item to the array
});
$.each(currentItems, function(name, data) {
//Loop through each name. We don't actually use the name variable because we don't care what someone's name is
if (data.length > 1) {
//Do we have more than 1 element in our array? time to move some stuff
$.each(data, function(i, el) {
var $el = $(el); //See note above
if (i == 0) {
//If this is the first element, let's just go ahead and move it to the merge column ul
$el.appendTo($mergeColumn);
} else {
$el.remove(); //Otherwise, we've already got this element so delete this one.
} //end if/else
}); //end $.each(data)
} //end if data.length >1
}); //end $.each(currentItems)
}); //end $.on()
}); //end $(
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="run-code" class="btn btn-success">Click Me</button>
<h4>List 1</h4>
<ul id="listOne">
<li class="columnItem">John</li>
<!--will be removed and put under CommonLister-->
<li class="columnItem">James</li>
<li class="columnItem">Mary</li>
<!--will be removed and put under CommonLister-->
</ul>
<h4>List 2</h4>
<ul id="listTwo">
<li class="columnItem">John</li>
<!--will be removed and put under CommonLister-->
<li class="columnItem">Mark</li>
<li class="columnItem">Mary</li>
<!--will be removed and put under CommonLister-->
</ul>
<h4>Common List</h4>
<ul id="CommonLister">
<!--Extra ul will be added here-->
</ul>
It's invalid nesting a ul directly in a ul like this but if you have to, you could use jquery wrapAll:
$( "li" ).wrapAll( "<ul></ul>" );
See fiddle: https://jsfiddle.net/9xLt6d9f/
I agree with charlietfl that it seems strange to do it this way. However, to answer your question, the best way to force this improperly formatted HTML code would be hardcode it into your original file. Try the following code for the end of your file:
<h4>Common List</h4>
<ul id="CommonLister">
<ul id="CommonListerSub">
<!--Extra ul will be added here-->
</ul>
</ul>
Then, simply change one line of your code:
var $mergeColumn = $('#CommonListerSub'); //Common list reference
This will force it to list the list items under the nested ul tags.
I hope this is an acceptable solution. If for some reason it doesn't work, please comment as to what additional limitations you have, and perhaps share the link of the page that is giving you the required template or format specifications.
I have a ul li as below:
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
How can I change the order of list elements using Jquery? So that on load, the new list should look like:
<ul id="list">
<li>2</li>
<li>1</li>
<li>3</li>
</ul>
Is it possible to achieve using Jquery?
USe like this,
$("#list li:eq(0)").before($("#list li:eq(1)"));
eq selector selects the element with index. Then you can use before() or after() to change the postion .
Fiddle
your jquery would be .
you can use insertBefore.
$('#list').find('li:eq(1)').insertBefore('li:eq(0)');
DEMO
Try,
var lists = $('#list li');
lists.filter(':contains(2)').insertBefore(lists.filter(':contains(1)'));
DEMO
or
var lists = $('#list li');
lists.filter(':nth-child(2)').insertBefore(lists.filter(':nth-child(1)'));
DEMO
To make the first one last regardless of number of items:
$("#list li:last").after($("#list li:first"));
Demo
If you use html like this:
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
you can use after/before or appendTo/prependTo to manipulate lists and other DOM nodes:
var $list = $('#list'),
$items = $list.children(),
$firstItem = $items.first();
//remove first item from DOM
$firstItem.detach();
//set first item after second
$items.eq(1).after($firstItem);
And after this you will have such list:
<ul id="list">
<li>2</li>
<li>1</li>
<li>3</li>
</ul>
Fiddle
Demo try this,
alert($('li').eq(0).insertAfter($('li').eq(1)));
$("#list").prepend($("li:eq(1)"));
DEMO
or
$("li:eq(1)").prependTo("#list");
DEMO