I have a menu where LI sometimes have an img and sometimes not.
<ul id="manufact">
<li>
<a href="" class="aaa">
<img>
<span>First name</span>
</a>
</li>
<li>
<a href="" class="bbb">
<img>
<span>Second name</span>
</a>
</li>
</ul>
When there is "aaa" class in href I have to delete only first word in span. And when is "bbb" - not, but delete the img (cause in this case I don't have the real .jpg file to display, and in Safari there is a blank ugly "?").
So I try smthg like this
$('#manufact li > a span').each(function(){
var element = $(this);
if($(this).closest("a").is( ".aaa")){
element.text(element.text().split(' ').splice(1).join(' '));
}
// It works
else {
Here I failed to put some JS to delete top Img.
}
});
My desired result is (played with closest, previous, parent etc but failed)
<ul id="manufact">
<li>
<a href="" class="aaa">
<img>
<span>name</span>
</a>
</li>
<li>
<a href="" class="bbb">
<span>Second name</span>
</a>
</li>
</ul>
You can try as follows:
$('#manufact li > a span').each(function() {
var element = $(this);
if ($(this).closest("a").is(".aaa")) {
element.text(element.text().split(' ').splice(1).join(' '));
}
else if ($(this).closest("a").is(".bbb")) {
$(this).prev("img").remove();
}
});
You can use something like:
$('#manufact li a.aaa span').each(function(){
var element = $(this);
element.text(element.text().split(' ').splice(1).join(' '));
});
$('#manufact li a.bbb img').each(function(){
$(this).remove();
});
Related
Here's my code:
I want it in a way that when i click on a child link, it becomes active and the parent link is active too. I utilize the css class .active for my active classes for both the main and sub-menu.
The below JS snippet works but only for the menus without sub-menus
$(document).ready(function($) {
var url = window.location.href;
var activePage = url;
$('.menu li a').each(function() {
var linkPage = this.href;
if (activePage == linkPage) {
$(this).closest("li").addClass("active");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul class="list">
<li class="header">MAIN NAVIGATION</li>
<li class="">
<a href="index.php">
<i class="material-icons">home</i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="sell.php">
<i class="material-icons">receipt</i>
<span>Sell</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">show_chart</i>
<span>Reporting</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">apps</i>
<span>Products</span>
</a>
<ul class="ml-menu">
<li>
Add Product
</li>
<li>
All Products
</li>
<li>
Add Category
</li>
<li>
All Categories
</li>
</ul>
</li>
</ul>
</div>
<!-- #Menu -->
Implement an on mousedown event listener for your anchor tags, passing in the id for each anchor tag and use the parentElement property to get the element's parent.
document.getElementById("myLI").parentElement.nodeName;
you can try this JS code:
$(document).ready(function () {
$('a').click(function () {
//removing the previous selected menu state
$('.menu').find('li.active').removeClass('active');
//adding the state for this parent menu
$(this).parents("li").addClass('active');
});
});
And the css for Active link:
.active > a {
color:red;
}
hope it helps...
I have an html like this
<ul class="products">
<li>
<a href="#" class="product-images">
<span class="featured-image">
<img src="img1.jpg"/>
<img src="img1-1.jpg"/>
</span>
</a>
</li>
<li>
<a href="#" class="product-images">
<span class="featured-image">
<img src="img2.jpg"/>
<img src="img2-2.jpg"/>
</span>
</a>
</li>
//some other li elements
</ul>
What I want to do is get the fist image in the first li element and remove that with jQuery.
What I've tried
jQuery (document).ready(function(){
jQuery('.products li:first .featured-image img:first').remove();
});
But that removes all img under first span.
Any help is appriciated.
You can select first li and then find first img inside it and remove it DEMO.
$('.products li').first().find('img').first().remove()
Another way to do this is
$('.products li:first img:first').remove()
This works for me, where I look for the first direct child img of the first .featured-image element
jQuery (document).ready(function(){
jQuery('.featured-image:first > img:first').remove();
});
I'm wondering if anyone could explain to me what is going on here?
var testNo = $("#test").text()
$("ul li a").click(function() {
$("#test").text($(this).text());
console.log(testNo)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
1
<ul>
<li>
<a href="#" >1</a>
</li>
<li>
2
</li>
<li>
<a href="#" >3</a>
</li>
</ul>
</li>
</ul>
It is strange to me why this wouldn't update the list item as you click using this method. However, if you change the javascript to;
$("ul li a").click(function() {
var testNo = $("#test").text()
$("#test").text($(this).text());
console.log(testNo)
})
It shows the value as one behind, but set the following as;
$("ul li a").click(function() {
$("#test").text($(this).text());
var testNo = $("#test").text()
console.log(testNo)
})
and it has the desired behaviour.
Is there a way to achieve what this last code snippet gives me, but by using the first code format?
Let me know something doesn't make sense,
thanks
You need to update the testNo variable text, then only it will show the latest text. Try:
var testNo = $("#test").text()
$("ul li a").click(function() {
testNo = $(this).text();
$("#test").text($(this).text());
console.log(testNo)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<ul>
<li>
1
<ul>
<li>
<a href="#" >1</a>
</li>
<li>
2
</li>
<li>
<a href="#" >3</a>
</li>
</ul>
</li>
</ul>
It's all about when you get the value of the $('#test').text() -- because you then go on to change the source value.
Your code does two things: (1) It reads #test and stores its value as testNo, and (2) it gets the text from the clicked anchor tag and puts that value into #test. So two things change: the var testNo and #test.
If you save the value of #test as var testNo, then change the value of #test before displaying testNo, they will have different values.
I think what you want to do is this:
$("ul li a").click(function() {
var testNo = $(this).text()
$("#test").text(testNo);
console.log(testNo)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
1
<ul>
<li>
<a href="#" >1</a>
</li>
<li>
2
</li>
<li>
<a href="#" >3</a>
</li>
</ul>
</li>
</ul>
In your first code testNo is set globally and take the value at page load in the second and 3th it is set locally so the value changes at each click event ,
In the second the value is incremented before the text is change so it captures the previous altered value, the 3th the value is saved after the text is saved so testNo is display the updated value
On a form, I have to select all first <a> elements with a specific attribute value from all the list items present in the form. For instance, in the below code, I have to select <a> elements with the content xxx and zzz — or in other words, the first <a> element with data-role="modal" from all list items.
console.log($('ul li a[data-role="modal"]:first'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a data-role="modal">xxx</a>
<a data-role="modal">yyy</a>
</li>
<li>
<a>abc</a>
<a data-role="modal">zzz</a>
<a data-role="modal">xyz</a>
</li>
</ul>
The jQuery I tried is only selecting the one with xxx.
You can use .find() to get all a elements with attribute data-role=modal in ul li and apply :eq to get first for each match:
$('ul li').find('a[data-role="modal"]:eq(0)').css('color', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a data-role="modal">xxx</a>
<a data-role="modal">yyy</a>
</li>
<li>
<a>abc</a>
<a data-role="modal">zzz</a>
<a data-role="modal">xyz</a>
</li>
</ul>
References
.find()
:eq
Check this
$('document').ready(function(){
$('ul li').each(function(){
$(this).find('a[data-role=modal]:first').css('background-color','red');
});
});
I guess this may help
$('document').ready(function(){
$('ul li').each(function(){
$(this).find('a[data-role="modal"]').first().css('background-color','red');
});
});
Try:
$('ul li').find('a[data-role="modal"]:first')
console.log( $('ul li').find('a[data-role="modal"]:first').map(function() {
return $(this).text();
}).get() );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<a data-role="modal">xxx</a>
<a data-role="modal">yyy</a>
</li>
<li>
<a>abc</a>
<a data-role="modal">zzz</a>
<a data-role="modal">xyz</a>
</li>
</ul>
I have a menu like :
<ul>
<li>
<a class="scroll-to" href="#one">one</a>
</li>
<li>
<a class="scroll-to" href="#two">two</a>
</li>
<li>
<a class="scroll-to" href="#three">three</a>
</li>
</ul>
And on my page, multiple anchor like :
<a id="two" target="_blank"></a>
or
<a id="one" target="_blank"></a>
I'm looking for a way to set an active class to my menu when i scroll to an anchor (with click or mouse scroll).
For example if i scroll to my anchor id="two" i need to set active my li #two.
Any ideas ?
If I understand your problem, add your anchors some class, for example section and try this:
$('.section').hover(function() {
var anchor = $(this).attr('id');
$('a[href="#'+anchor+'"]').addClass('active');
}, function() {
$('a').removeClass('active');
});
http://codepen.io/tomekbuszewski/pen/MwMWoK
var links = document.querySelectorAll("a.scroll-to");
console.log(links[1]);
for (var i = links.length -1; i>=0; i--)
{
//click event
links[i].onclick= someHandlerFunction;
//hover event
links[i].onmouseover= someHandlerFunction;
}
var liActive = undefined;
function someHandlerFunction(event) {
if (liActive != undefined) liActive.setAttribute("class", "");
liActive = event.target.parentNode;
liActive.setAttribute("class", "active");
return false;
}
.menu{
background-color: #00ff00;
}
.menu li.active{
background-color: blue;
}
<ul class="menu">
<li>
<a class="scroll-to" href="#one">one</a>
</li>
<li>
<a class="scroll-to" href="#two">two</a>
</li>
<li>
<a class="scroll-to" href="#three">three</a>
</li>
</ul>
Voila (add and remove class in the same time), it's a but it's a bit redundant to add active class at click and hover.