I've a HTML list and want to add a simple pagination with the jQuery Plugin Pajinate. That works fine, but I would like Pajinate to ignore the hidden list-items.
For testing, here is the codesnippet on jsfiddl.net (same as below). The last two list-items should not be displayed and the the num of pages should be 3 instead of 4.
And ideas how to fix it? Thanks in advance!
<script>
$(function () {
$('#paging_container3').pajinate({
items_per_page: 5,
item_container_id: '.alt_content',
nav_panel_id: '.alt_page_navigation',
nav_label_first: '<<',
nav_label_last: '>>',
nav_label_prev: '<',
nav_label_next: '>'
});
});
</script>
<div id="paging_container3" class="container">
<h2>Custom List Size</h2>
<div class="alt_page_navigation"></div>
<ul class="alt_content">
<li>
<p>One</p>
</li>
<li>
<p>Two</p>
</li>
<li>
<p>Three</p>
</li>
<li>
<p>Four</p>
</li>
<li>
<p>Five</p>
</li>
<li>
<p>Six</p>
</li>
<li>
<p>Seven</p>
</li>
<li>
<p>Eight</p>
</li>
<li>
<p>Nine</p>
</li>
<li>
<p>Ten</p>
</li>
<li>
<p>Eleven</p>
</li>
<li>
<p>Twelve</p>
</li>
<li>
<p>Thirteen</p>
</li>
<li>
<p>Fourteen</p>
</li>
<li style="display: none">
<p>Fifteen (ignore me)</p>
</li>
<li style="display: none">
<p>Sixteen (ignore me)</p>
</li>
</ul>
</div>
Related
I am trying to make a sidebar that stores the last click link into the local storage and still opens the collapse links after the page reloads.
$(".clickedLink").parent().parent().css('background-color', 'green');
Could someone help me how to select elements?
Example: If I click the "PHP Advanced" link it will select the #5 & #6, also the #1 & #2. But not selecting the #3 & #4...
<a class="nav-link" aria-expanded="false">Programming</a> __#1__
<div class="collapse"> __#2__
<ul>
<li>
<a class="nav-link" aria-expanded="false">HTML</a> __#3__
<div class="collapse"> __#4__
<ul>
<li>HTML Basic</li>
<li>HTML Advanced</li>
<li>HTML Examples</li>
</ul>
</div>
</li>
<li>
<a class="nav-link" aria-expanded="false">PHP</a> __#5__
<div class="collapse"> __#6__
<ul>
<li>PHP Basic</li>
<li>PHP Advanced</li>
<li>PHP Examples</li>
</ul>
</div>
</li>
</ul>
</div>
I would appreciate it if anyone can help me out
You can do something like this. call parents('.collapse') to get all parents with given class. Then call prev() to get the links.
$('a').click(function() {
var parents = $(this).parents('.collapse');
parents.css('border-top', '1px solid red');
parents.prev().css('border-top', '1px solid blue');
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="nav-link" aria-expanded="false">Programming</a> __#1__
<div class="collapse"> __#2__
<ul>
<li>
<a class="nav-link" aria-expanded="false">HTML</a> __#3__
<div class="collapse"> __#4__
<ul>
<li>HTML Basic</li>
<li>HTML Advanced</li>
<li>HTML Examples</li>
</ul>
</div>
</li>
<li>
<a class="nav-link" aria-expanded="false">PHP</a> __#5__
<div class="collapse"> __#6__
<ul>
<li>PHP Basic</li>
<li>PHP Advanced</li>
<li>PHP Examples</li>
</ul>
</div>
</li>
</ul>
</div>
I create submenu and I need to get value of direct parent for Submenu"li"
this is my code
<div class="box">
<div class="col-sm-6">
<!-- main menu-->
<ul>
<li class="m-sub">
Cars
<!-- sub menu for cars-->
<ul class="sub">
<li> Audi</li>
<li> KiA</li>
</ul>
</li>
<li class="m-sub">
Tablets
<!--start sub menu for tablet -->
<ul class="sub">
<li> Phone</li>
<li> Sony</li>
</ul>
</li>
<li> Laptop</li>
<li> Glass </li>
</ul>
</div>
</div>
I need to get direct parent of sony for example, when I use ($(this).parent()).text() the result was phone not tablet.
I need to get value of parent "tablet" ,when select Audi i need to get cars
thanks in advance.
Tablets isn't inside the direct parent of your list item; you'll need a bit more jQuery:
var li = $('.sub > li')
console.log(
li.closest('.m-sub').contents().eq(2).text().trim() //=> 'Tablets'
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="m-sub">
<span><i class="icon-tablet"></i></span> Tablets <span class="leftarr"><i class="icon-chevron-right"></i></span>
<ul class="sub">
<li> Phone
</li>
<li> Sony
</li>
</ul>
</li>
<li> Laptop
</li>
<li> Glass
</li>
</ul>
is there any easy way to add Li from jquery in below structure
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66" >
<ol class="top-menu-bar pull-right">
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
</ol>
</div>
i want to add below li after FAQ
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
I have tried below but it is addind in all li's
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 li").last().html('<li> Menu 5 </li>');
Use after() to insert after an element
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 li").last().after('<li> Menu 5 </li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66">
<ol class="top-menu-bar pull-right">
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
</ol>
</div>
or you can use append() for appending content
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 ol").append('<li> Menu 5 </li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66">
<ol class="top-menu-bar pull-right">
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
</ol>
</div>
Use the After() method of JQuery:
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 li").last().after('<li> Menu 5 </li>');
Here is Fiddle for that.
I am new to javascript, forgive me asking the simple question.
Is there anyone could guide me how to use javascript to dynamically list different things when clicking different button.
For example: Like this link:
when I click the Brand development, ecommerce development, it will list all related items.
I create an example on jsFiddle, please check from here
The HTML content is like:
<ul class='product-catlogs'>
<li><a class='product'>All</a>
</li>
<li><a class='books'>Books</a>
</li>
<li><a class='mobiles'>Mobiles</a>
</li>
<li><a class='cars'>Cars</a>
</li>
<ul class='product-list'>
<li>
<div class='product books'>book1</div>
</li>
<li>
<div class='product books'>book2</div>
</li>
<li>
<div class='product books'>book3</div>
</li>
<li>
<div class='product mobiles'>Iphone</div>
</li>
<li>
<div class='product mobiles'>Sumsang</div>
</li>
<li>
<div class='product cars'>Mercedes</div>
</li>
<li>
<div class='product cars'>Toyota</div>
</li>
<li>
<div class='product cars'>Ford</div>
</li>
The js code is like:
$('.product-catlogs a').click(function (e) {
var tag = this.className;
$('ul li .' + tag).parent().show();
$('ul li div').not('.' + tag).parent().hide();
})
I have drop down menu in wordpress and I have small problem with wrap nth(every 4th element) li.
My code
<li id="item1"> ... </li>
<li id="item2"> ... </li>
<li id="item3">
<ul class="sub-menu">
<li> Test1</li>
<li> Test2</li>
</ul>
</li>
<li id="item4">
<ul class="sub-menu">
<li> Test3</li>
<li> Test4</li>
<li> Test5</li>
<li> Test6</li>
<li> Test7</li>
<li> Test8</li>
<li> Test9</li>
<li> Test10</li>
<li> Test11</li>
<li> Test12</li>
</ul>
</li>
jQuery code
var divs = $("ul.sub-menu > li");
for(var i = 0; i < divs.length; i+=4) {
divs.slice(i, i+4).wrapAll("<div class='column'></div>");
}
My results (wrong)
<li id="item1"> ... </li>
<li id="item2"> ... </li>
<li id="item3">
<ul class="sub-menu">
<div class="column">
<li> Test1</li>
<li> Test2</li>
<li> Test3</li>
<li> Test4</li>
</div>
</ul>
</li>
<li id="item4">
<ul class="sub-menu">
<div class="column">
<li> Test5</li>
<li> Test6</li>
<li> Test7</li>
<li> Test8</li>
</div>
<div class="column">
<li> Test9</li>
<li> Test10</li>
<li> Test11</li>
<li> Test12</li>
</div>
</ul>
</li>
What I try achieve:
<li id="item1"> ... </li>
<li id="item2"> ... </li>
<li id="item3">
<ul class="sub-menu">
<div class="column">
<li> Test1</li>
<li> Test2</li>
</div>
</ul>
</li>
<li id="item4">
<ul class="sub-menu">
<div class="column">
<li> Test3</li>
<li> Test4</li>
<li> Test5</li>
<li> Test6</li>
</div>
<div class="column">
<li> Test7</li>
<li> Test8</li>
<li> Test9</li>
<li> Test10</li>
</div>
<div class="column">
<li> Test11</li>
<li> Test12</li>
</div>
</ul>
</li>
any idea what I do wrong? It's necessary because "item3" and "item4" are diffrents category and with my code li elements are mix if in first ul is less then 4 items
Wow, what you just did, I didn't know it was possible. :)
Anyway:
$('.sub-menu').each(function() {
var children = $(this).find('> li');
for (var i = 0; i < children.length; i+=4) {
children.slice(i, i+4).wrapAll("<div class='column'></div>");
}
});
This will use the functionality you tried, but it will loop through every submenu independently and the items will be properly grouped.
http://jsfiddle.net/9NUwJ/