How we can hide href element in specific UL element ( not in all UL elements, because UL elements are with the same name).
For example we have HTML code like this:
<ul class="UL_tag">
<li>Text 1</li>
<li>Text 2</li>
<li>Link to GOOGLE</li>
</ul>
<ul class="UL_tag">
<li>Text 1</li>
<li>Text 2</li>
<li>Link to Yahoo</li>
</ul>
And we can hide these href's by using this code:
$('a.description').hide();
How should I change this javascript code, if I want to hide just one href element which is in the one UL element? Not all href elements with the class name "description" ?
Thank you for your help!
You can use attr href selector:
$('a[href="http://www.yahoo.com"]').hide();
Here is an example links, which you can use with different methods:
http://api.jquery.com/attribute-contains-selector/
http://api.jquery.com/attribute-ends-with-selector/
And this questions also related: jQuery cant access element with its attr href // simple tabs structure
You can traverse the dom to get the element within the parent ul
$(this).parent().siblings().find('a.description').hide();
// get current clicked > parent li > siblings > find a.description in li siblings > hide
http://jsfiddle.net/CjfXu/1/
EDIT
Since your li is actually wrapped inside a span also.. .parent won't work as it's getting the span element. You need to use .closest() - which gets the closest ancestor that matches
$(this).closest('li').siblings().find('.description').hide();
Also don't bind a click event inside another click event as that causes the dom to attach multiple event handlers to the element. Always bind inside the document.ready function. Dynamically created elements or when you have many elements that you need to bind, using delegation would be the most efficient way.
You had your code like this
$('a.start').bind('click', function(){ // <-- this should be $('a:not(.start)').bind
// code
$('a.start').click(function(e) {
$(this).parent().siblings().find('.description').hide();
});
});
Which is binding any anchors with class=start a click event each time the first anchor is clicked
to use delegation
$('parentElement').on('click','element', function(){
})
or jQuery 1.6 and below
$('parentElement').delegate('element','click', function(){
});
You should give proper ids to each <ul>:
<ul class="UL_tag" id="firstList">
<li>Text 1</li>
<li>Text 2</li>
<li>Link to GOOGLE</li>
</ul>
<ul class="UL_tag" id="secondList">
<li>Text 1</li>
<li>Text 2</li>
<li>Link to Yahoo</li>
</ul>
And then:
$('#firstList a.description').hide();
HTML :
<ul class="UL_tag">
<li>Text 1</li>
<li>Text 2</li>
<li>Link to GOOGLE</li>
</ul>
<ul class="UL_tag">
<li>Text 1</li>
<li>Text 2</li>
<li>Link to Yahoo</li>
</ul>
Jquery:
var d = $('.UL_tag li').children('a')[1]; // If you remove first href element change it to value "1" to "0"
$(d).hide();
See this Demo: http://jsfiddle.net/7aNRZ/8/
select the element by tagname and class, and then filter for href value:
$('a.description[href="http://www.google.com"]').hide();
you can also limit the result to only elements inside the class .UL_tag:
$('a.description[href="http://www.google.com"]', '.UL_tag').hide();
Thank you for your answers, I think all of these answers are also correct answers, but what I'm trying to achieve is a bit different. Actually there is 3 li elements (two of them are with href tag):
<ul class="UL_tag">
<li>There you can download something.</li>
<li>Download</li>
<li>Link to GOOGLE</li>
</ul>
When you click on the "Download" link, javascript will be called:
$(function(){
var seconds = 10;
var canClick = true;
seconds *= 1000;
$('a.start').bind('click', function(){
if(canClick){
var link = $(this).attr('href');
var loader = $('input[name="link"]').val();
$(this).html('<img src="' + loader + '"/>');
setInterval(function(){
window.location.reload();
window.location = link;
}, seconds);
// Description will be hidden everywhere.
// How we can hide description in only one
// row. In row where the a.start was called?
$('a.description').hide();
canClick = false;
}
return false;
});
});
It will show the "loading gif" and after 10seconds user will beredirect to the download page.
So is it possible to hide "description" in only one row not everywhere. Just in a row where we call this "start" function?
The biggest problem is to hide just one li element, when all UL's and li's have same class name.
Related
I have menu with items. I want to add to tag class with name "name". I try to use:
var element = document.getElementById('myElement');
element.classList.add('myClass');
But the tag doesn't have any ID or class.
It's even possible with Javascript?
<ul id="menu-main">
<li id="menu-item">
ODKAZ
</li>
</ul>
If you really want to add the class with javascript, you can do:
var element = document.getElementById('menu-item');
element.getElementsByTagName("a")[0].classList.add('js-target-scroll');
<ul id="menu-main">
<li id="menu-item">
ODKAZ
</li>
</ul>
But beware that the "onemenu" you are talking about is looking for this css-class and if your own script is not run before that, this won't work since the class is not yet added.
If it's your own theme you are developing, you can add the css-class server side with custom walker.
If you want to add the class for all menu item anchor tags, you can use the code below. If not, use what Esko has suggested in his answer and comments.
var menuItemLinks = document.querySelectorAll("#menu-main li a");
menuItemLinks.forEach(function(element) {
element.classList.add("myClass");
});
<ul id="menu-main">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
This should be pretty simple. Basically when an item in a list is clicked that text is inserted/replaced into a target div. 'replaceWith' is probably not the thing to use because it deletes the original data.
Also how do you add the class of 'selected' to the text in the target div.
Anyway here is what I have so far: http://jsfiddle.net/BM8Cb/
HTML
<div class="selected" id="here">
<li>All</li>
</div>
<hr>
<ul>
<li>All</li>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
</ul>
CSS
ul {list-style:none;padding:0; margin:0;}
li {cursor:pointer;}
li:hover {color:red;}
.selected {color:red;}
JS
$("li").click(function() {
$("#here").replaceWith(this);
});
Thank you for any help
What about
$("li.item").click(function() {
$("#here").html($(this).html());
});
If all you need is the text.
using replaceWith will replace the DOM node so it's no longer there the next time you try. You need to use append
$("#here").append(this);
and By using 'this' you are copy everything include the event handler. if you want just the text you can do something like
$("#here").append(this.innerHTML);
Change your JS to:
$("li.item").click(function() {
var item = $(this).clone();
item.attr("class","selected");
$(".selected").append(item)
$(this).hide();
});
Here's the fiddle: http://jsfiddle.net/J7JST/2/
This will also add the selected class to your item
I'm trying to take group of headers and lists, and contain them individually so I can style them. ie:
<h2>Title 1</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Title 2</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
I attempted this by using .before() and .after to add a div before the h2 tag, and close it after each ul however I found out that jquery cleans and closes the tag automatically. So I'm guessing I need to use wrap() just not sure how to group the title and list together.
Use
$('h2').each(function(){
var self = $(this);
self.add( self.next() ).wrapAll('<div/>');
});
demo at http://jsfiddle.net/gaby/e4f9h/
You want to create a jQuery collection that contains both elements. For this you would select the h2 elements. You than would need to find the next() element that is a ul. After you get both of them linked, you would wrapAll() with your containing div.
$("h2").each( function(){
var h2 = $(this);
h2.add(h2.next("ul")).wrapAll('<div class="madWrapper"></div>');
});
jsFiddle
im a css/designer guy so please excuse my lameness in not knowing any .js
basically i want to know how to add an auto incremental id to a list item with javascript / jquery for something that i am trying to add some css to.
before
<li id="">Item number 1</li>
<li id="">Item number 2</li>
<li id="">Item number 3</li>
after
<li id="1">Item number 1</li>
<li id="2">Item number 2</li>
<li id="3">Item number 3</li>
thanks in advance and especially just for reading this
tried all the responses, nothing has worked on a plain html page with nothing but the ul/li items.
thanks to all that tried, i have failed in a big way.....im not a coder
I'm going to give your li tags an encompassing ul with an id in case there are other li tags on the page that you don't want to order, but in jQuery this is pretty easy for:
<ul id="ordered">
<li>Item number 1</li>
<li>Item number 2</li>
<li>Item number 3</li>
</ul>
You would simply use the each method:
$('#ordered li').each(function(i,el){
el.id = i+1;
});
I would recommend using something other than just a plain integer for an id though, so maybe something like 'ordered' + (i+1) instead of just i+1 above.
Your tags say jQuery, so:
$("li").each(function(i){this.id = i})
So you can learn: you make a collection of HTML nodes with the $('foo') syntax. You use CSS selectors, so li will get -every- <li> on the page.
.each loops over those collected HTML elements, and does something to them. The 'something' is in the code function(i){this.id = i}. jQuery passes which loop you're on to the function as i, and the code inside the curly braces sets the id of that particular element to i.
If you need id's for styling, that's a bad idea. What you should do is use css 3 pseudo class :nth-child(n) which is in your area of css.
I'm going to wrap your code in a div so it's easier to code for
<div id="increment">
<li>Item number 1</li>
<li>Item number 2</li>
<li>Item number 3</li>
</div>
And js would be:
function loadcode(){
var increments = document.getElementById("increment");
var li = increments.getElementsByTagName("li");
for (i=0;i<li.length;i++) li[i].setAttribute("id", i+1);
}
and in your HTML:
<body onload="loadcode()">
This is a two-part question. I'm using jQuery for a project and wanting to click a link and toggle the class name "highlight" to that link and also to the div with the same id as the rel attribute of the link. I then want to be able to link to the next div without the classname of "highlight". Here's the HTML for it:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
go to next div without class of highlight
<div id="panel1">some text</div>
<div id="panel2">some text</div>
<div id="panel3">some text</div>
Can anyone help with jQuery side of things?
Many thanks in advance!
Assuming HTML like this:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<a id="next-unhighlighted">Go to next div without class "highlight"</a>
<div class="panel" id="panel1">Panel 1</div> <!-- Note the added -->
<div class="panel" id="panel2">Panel 2</div> <!-- "panel" classes -->
<div class="panel" id="panel3">Panel 3</div>
You can use JS like this:
$('ul li a').click(function () {
var $this = $(this), // <a>
id = $this.attr('rel'),
nextUnhighlighted = $('#next-unhighlighted'), // <a>
targetDiv = $('#' + id),
nextDiv;
// Un/highlight the clicked link
$this.toggleClass('highlight');
// Un/highlight the div related to the target link
targetDiv.toggleClass('highlight');
// Update nextUnhighlighted to point to next unhighlighted div
nextDiv = $('div.panel:not(.highlight)');
if (nextDiv[0]) { // A next sibling was found
nextUnhighlighted.attr('href', '#' + nextDiv.attr('id'));
} else {
nextUnhighlighted.removeAttr('href');
}
});
Note that, if the final panel is already highlighted, then this code does not update the href attribute for a#next-unhighlighted, but removes it. It's a trivial exercise to add wrap-around behavior, such that highlighting the final panel would link back to the first panel.
A note about the odd syntax if (nextDiv[0]): If the first element in the jQuery collection nextDiv exists, then there is at least one element in the collection. This behaves similarly to (but not exactly the same as) nextDiv.length > 0, but is marginally faster and smaller.
As discussed in the comments, to link each panel to the next unhighlighted one, add <a rel="next-panel">Next panel</a> to each panel's HTML, then add something like this to the main click handler:
$('div.panel a[rel="next-panel"]').each(function () {
var $this = $(this),
nextPanel = $this.parent().next('div.panel:not(.highlight)');
if (nextPanel[0]) {
$this.attr('href', '#' + nextPanel.attr('id'));
}
});
Depending on your project requirements, you'll need to initialize each of these next-panel links (or else they'll only initialize after the first click), and you may want to make the final panel's ;oml wrap around to the first.