I'm trying to create a simple filtering systemt that would hide posts that do not have the same id as the li's under the navig class. To achieve this I am looping through all .article li's and checking what's their id.
Example:
click on li with id="health"
Article 2 disappears
Thank you!
HTML:
<ul class="navig">
<li id="health">Health</li>
<li id="ASD">ASD</li>
</ul>
<br>
<ul class="article">
<li id="health">Article 1</li> <br>
<li id="ASD">Article 2</li> <br>
<li id="health">Article 3</li>
</ul>
Javascript:
$('.navig li').onclick(function () {
$id = this.id;
$('.article li').each(function() {
if ($id != this.id) {
$('.article li').hide();
}
});
});
The fundamental problem is your HTML is invalid. You can't use the same id value on more than one element. Separately, you've used onclick where you would want to use click.
I'd probably use a data-article-id attribute on the navigation li instead, like this:
For example: Live copy (source)
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="utf-8">
<title>Testing</title>
</head>
<body>
<ul class="navig">
<li data-article-id="health">Health</li>
<li data-article-id="ASD">ASD</li>
</ul>
<br>
<ul class="article">
<li id="health">Health Article</li>
<li id="ASD">ASD Article</li>
</ul>
<script>
$('.navig li').click(function () {
var articleId = $(this).attr("data-article-id");
alert(articleId);
var articles = $(".article li");
articles.not("#" + articleId).hide();
$("#" + articleId).show();
});
</script>
</body>
</html>
You'll want to do something to hide the articles (or show a default one) when the page loads, etc.; I'll leave that as an exercise for you. :-)
Side note: br elements cannot be children of ul elements, I've removed the ones from the articles list.
$('.navig li').onclick(function () { <-- not valid jquery
There is no onclick method in jQuery...there is .click(function(){}) or on("click", function(){})
second porblem, ids need to be singular. They can not be repeated. Use a data attribute [and br's can not be children of ul]
<ul class="navig">
<li id="health">Health</li>
<li id="ASD">ASD</li>
</ul>
<br>
<ul class="article">
<li data-id="health">Article 1</li>
<li data-id="ASD">Article 2</li>
<li data-id="health">Article 3</li>
</ul>
and script
$('.navig li').on("click", function() {
var id = this.id;
$(".article li").hide().filter('[data-id="' + id + '"]').show();
});
JSFiddle: http://jsfiddle.net/q8SCF/
Related
I'm trying to figure out how I can chain multiple append into my markup. Basically after appending an element, I would like the next element to append it to the first appended element. I hope what I'm saying makes sense.
If you take a look at my code, I just appended the element <ul class="menu" /> into the element #footer .research-centers-menu .research.
Then on the next code I'm trying to insert/append the variable centers to the <ul class="menu" />
The current output right now doesn't insert the element but places it outside instead. Apologies for my bad english and explanation
var researchCenters = $('a[href$="/items"]').next().clone(),
centersList = $('li', researchCenters),
centers = centersList.slice(0);
var research = $('#footer .research-centers-menu .research').append('<ul class="menu" />');
$(research).append(centers);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<ul>
<li>item one</li>
<li>item two</li>
</ul>
</li>
</ul>
<div id="footer">
this is a footer
<div class="research-centers-menu">
<div class="research">
</div>
</div>
</div>
The cause of your appending issue is because append() returns the original element, not the appended element.
To make your code work you could invert the logic so that you create the new ul, then use appendTo(). This will retain the reference required to append the li. Try this:
var researchCenters = $('a[href$="/items"]').next().clone(),
centersList = $('li', researchCenters);
var $research = $('#footer .research-centers-menu .research');
var $ul = $('<ul class="menu" />').appendTo($research);
$ul.append(centersList);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<ul>
<li>item one</li>
<li>item two</li>
</ul>
</li>
</ul>
<div id="footer">
this is a footer
<div class="research-centers-menu">
<div class="research"></div>
</div>
</div>
try to append like this.
var researchCenters = $('a[href$="/items"]').next().clone(),
centersList = $('li', researchCenters),
centers = centersList.slice(0);
var research = $('#footer .research-centers-menu .research')
var ul =$('<ul class="menu" />').append(centers);
research.append(ul);
I have some listings.
Currently id is test_3, test_1, test_2. I need number (3,1,2) from id of each li and append this number in to another data attribute. Please check the result section. It will give you an idea about what I am expecting. Thanks
Html
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
Script
$('#cat').attr('id').split("-")[2];
Expected result
<ul id="cat">
<li id="test_3" data-id="3">Text 3</li>
<li id="test_1" data-id="1">Text 1</li>
<li id="test_2" data-id="2">Text 2</li>
</ul>
To achieve this you can loop over the li elements and set the data() based on the number in the id attribute. Try this:
$('#cat li').each(function() {
$(this).data('id', this.id.split('_')[1]);
}).click(function() {
console.log($(this).data('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
You can loop through all of the children of the ul element with the id cat.
On each loop, get the ID by getting the id attribute, splitting it on _ and getting the first index.
You can then set the attribute by using JQuery's attribute function, which you can learn more about here.
$('#cat li').each(function () {
var dataId = $(this).attr('id').split('_')[1];
$(this).attr('data-id', dataId);
});
An example of this in action
$('#cat li').each(function () {
var dataId = $(this).attr('id').split('_')[1];
$(this).attr('data-id', dataId);
});
console.log($('#cat').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
This should some your problem.
Using $(this).attr("id").split('_') will split "cat_3" into "cat" and "3" then using [1] after will select "3"
$("#cat li").each(function(){
$(this).attr("data-id", $(this).attr("id").split('_')[1]);
})
console.log($("#cat").html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
You can also use a RegExpression.
var suffix = "test_2".match(/\d+/); // results --> 2
Basically it fetches out numeric value within a string value.
Usage
$('#cat li').each(function() {
$(this).data('id', this.id.match(/\d+/));
})
Basically I do have a block of HTML code for nested list as below:
<ul>
<li class="level_1">
Insulated And Extruded
<ul class="level_2">
<li>TE77</li>
<li>TE78</li>
<li>T77</li>
<li>TS77</li>
</ul>
</li>
<li class="level_1">Grille Type Rolling</li>
<li class="level_1">PVC High Speed Doors</li>
<li class="level_1">Swinging doors</li>
</ul>
Using this what I need to do is, I want to check li.level_1 has a <ul>, if so then I need to disable <a> link link which is directly inside li.level_1.
This is how I tried it in jquery, but its removing all a from the list.
if($('ul li').has('ul').length) {
$('ul li > a').removeAttr('href');
}
Can anybody tell me how to fix that issue?
You can check if li has ul and disable a like this.
$('.level_1:has(ul) > a').removeAttr('href')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="level_1">
Insulated And Extruded
<ul class="level_2">
<li>TE77</li>
<li>TE78</li>
<li>T77</li>
<li>TS77</li>
</ul>
</li>
<li class="level_1">Grille Type Rolling</li>
<li class="level_1">PVC High Speed Doors</li>
<li class="level_1">Swinging doors</li>
</ul>
You could set an event listener like this:
Set an id to the top level ul element:
<ul id="top_level_ul">
jQuery
$(document).on('click', '#top_level_ul > li > a', function(e) {
e.preventDefault();
});
ALTERNATIVE (pointer-events)
You can also set pointer-events:none to prevent any interaction:
$('#top_level_ul > li > a').each(function() {
$(this.addClass('noPointer'));
});
CSS
.noPointer {
pointer-events: none;
}
You have to start your "search" for links from $('ul li')
var $node = $('ul li');
if($node.has('ul').length) {
$node.find('ul li > a').removeAttr('href');
}
See following example:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul>
<li class="level_1">
Insulated And Extruded
<ul class="level_2">
<li>TE77</li>
<li>TE78</li>
<li>T77</li>
<li>TS77</li>
</ul>
</li>
<li class="level_1">Grille Type Rolling</li>
<li class="level_1">PVC High Speed Doors</li>
<li class="level_1">Swinging doors</li>
</ul>
<script>
var $node = $('ul li');
if($node.has('ul').length) {
$node.find('ul li > a').removeAttr('href');
}
</script>
</body>
</html>
I hope it helps you. Bye.
Link
$(document).ready(function(){
$('.level_2').siblings('a').remove();
});
UPD
$(document).ready(function(){
$('.level_2').siblings('a').css('pointer-events','none');
});
or
$(document).ready(function(){
$('.level_2').siblings('a').attr('onclick','return false');
});
I have the HTML code as given below to add the navigation to my site. (Note that the list is nested)
<div id="navigation">
<ul>
<li>Home</li>
<li>About us</li>
<li>Help</li>
<li>DropDown
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li class="last">A Last Link Text</li>
</ul>
</div>
I want to show the currently active page link in new color. So the corresponding list item should have the class active and I use the CSS to change the color. For example, if the default.html is the currently opened page, the code should be <li class=“active”>Home</li>.
How to do that in jQuery and JavaScript (I need both for two different websites).
Can anyone help me?
Thanks for your help.
Get your URL / Parse it:
var pathname = window.location.pathname;
Then add the class:
Jquery:
$(element).addClass('classname');
JS: How do I add a class to a given element?
Try this
$(document).ready(function () {
var url = location.href;
$('#navigation li a').each(function () {
var thisHref = this.getAttribute('href');
if (thisHref !== '#' && url.indexOf(thisHref) !== -1) {
$(this.parentNode).addClass('active');
return;
}
});
});
I could really use some help with what I have a feeling will be some pretty basic jquery, but I'm stuck all the same.
I have an unknown (dynamically generated) number of divs in my html each with a class of "page".
What I want to do is add an id to each div.page, and then fill a ul with an id of menu with li for each div.page containing an anchor with a href value of #page_n
(ie the id value of its corresponding div)
I want my output to look like this:
<div class="page" id="page_1">
...content...
</div>
<div class="page" id="page_2">
...content...
</div>
.....
<div class="page" id="page_n">
...content...
</div>
<ul #menu>
<li>Page 1</li>
<li>Page 2</li>
.....
<li>Page n</li>
</ul>
I'm adding the id's okay with:
$('li.page').each(function(index){$(this).attr("id", "page_" + (index+1));
});
But I'm struggling with the second part of my problem. I know this is probably kinda basic, but I'm just starting out....
Any help gratefully received... thanks in advance...
If your HTML initially looks like this:
<div class='page'>...</div>
<div class='page'>...</div>
<div class='page'>...</div>
<ul id='menu'></ul>
This jQuery code:
$(document).ready(function() {
$('div.page').each(function(i) {
var x = i+1;
var id = 'page_' + x;
$(this).attr('id', id);
var li = $('<li/>').append(
$('<a/>').attr('href', '#' + id).html('Page ' + x)
);
$('#menu').append(li);
});
});
Will make your HTML look like this:
<div class='page' id='page_1'>...</div>
<div class='page' id='page_2'>...</div>
<div class='page' id='page_3'>...</div>
<ul id='menu'>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>