Javascript each() function remove link - javascript

I've got a website under prestashop, and my dropdown menu has different categories that are all clickable. I would like to remove the links from the "Marques" and "Les Gammes" categories and leave just the text. I'm using the each() function to select all my categories, but this returns an array within the li and the ul inside the li.
Here is the JSFiddle.
Here is the js code:
$('jms-mega-menu').ready(function () {
// Get each div
$('.notlink').each(function () {
// Get the content
var str = $(this).text();
$(this).html(str);
});
});
And here is a sample of my html code. You can find the full code on the fiddle.
<ul jms-mega-menu>
<div>
...
<ul class="mega-nav level1">
<li class=" haschild group notlink"><a id="item-8" href="#">Marques</a>
<ul>
<li><a id="item-9" href="#">Apple</a></li>
<li><a id="item-10" href="#">Samsung</a></li>
</ul>
</li>
</ul>
<ul>
...

One solution would be use unwrap to remove the a tag from around the text. Note the use of .notlink > a to only affect anchors that are direct children of the .notlink and not the nested lists:
$('.notlink > a').contents().unwrap();
http://jsfiddle.net/orvrj7qs/5/
Another option which may be a bit more extensible would be to use replaceWith, which would allow you to make additional modifications to the text if needed:
$('.notlink > a').replaceWith(function(){
return $(this).text();
});
In this case, we simply replace the anchor with just the text within the anchor.
http://jsfiddle.net/orvrj7qs/6/

Related

How to get li from a href value containing string

I've got the following html
<ul id="navigationMenuTop" class="nav navbar-nav" data-bind="foreach: getRoutes">
<li data-bind="css: ..." >
<a data-bind="attr { href: ...">
This generates a nice top bar menu where users get to go to parts of the program where they have the rights for.
Now I need to get the li where the href in a contains 'registration'
I've tried several things, the latest being
$('.navigationMenuTop li a[href*="registration"]');
but no success yet, any ideas?
I think you are mixing few things here.
This is not a knockout question, more of a jQuery + CSS questions.
navigationMenuTop is ID - so you shouldn't access it with a dot which means class.
Try # instead:
$('#navigationMenuTop li a[href*="registration"]');
You can use the parent function to get the parent of the matched anchor
$('#navigationMenuTop a[href*="registration"]').parent();
you can check this out here
$("#navigationMenuTop").on('click','li',function (){
alert($(this).text());
});

Vanilla Javascript click on LI that contains a certain text

I have some code that scans a webpage and outputs a special string, such as: multus –a –um And on the page it's executed on there are many <LI> elements containing texts like multus –a –um but, they are all different. I need a way to search the page for an element containing a certain string and then change some CSS on the <LI> element.
Example:
I run my code and get: multus –a –um
Search page for an <LI> element containing multus –a –um
Change background of element to #17af50
It need to be a function too, so I can run it easily
Take a look at the various Array methods. They are fantastic.
Array
.from(document.querySelectorAll("li"))
.filter(function(item){ return item.innerText.indexOf("foo") !== -1; })
.forEach(function(item){ item.parentNode.classList.add("highlight"); });
.highlight { background-color: #17af50; }
<ul>
<li>bar</li>
<li>foo bar</li>
</ul>
<ul>
<li>bar</li>
<li>bar</li>
</ul>

How to use CHEERIO.js for this HTML?

<div class="A">
<section class="B" data-vr-zone="B">
<header class="C"> BarFoo</header>
<ul class="list">
<li data-vr-contentbox="">
<a href="http://www.foobar.com/.../html">
<small>BarBar</small>
<span>Foo Bar foobarbar FooFoo?</span>
</a>
</li>
<li data-vr-contentbox="">
<a href="http://www.foofoobar.com/.../html">
<small>BarBarBar</small>
<span>Foo foo FooFoo?</span>
</a>
</li>
I want to access the url in the HREF attribute. And the text in the SPAN -- Of only the first list item.
What I have works but I'm looking to learn a better way.
var url = $('div .A').children().children().children().children()[0].attribs.href;
var title = $('div .A').children().children().children().children()[0].children[2].children[0].data;
You want to use a better selector string to target the element & attribute of interest. Exactly how vague or precise you go involves trade-offs of coupling too tighly to the DOM structure and thus some irrelevant change to the HTML means your selector doesn't match anymore or using too vague a selector and matching more stuff than you intend.
vaguest: 'a' (find every anchor)
'.A a' (every anchor inside the div class="A")
Recommended: '.A li a' (must be part of a list)
crazy specific: 'div.A section.B ul.list li a'
.
var link = $('.A li a');
var href = link.attr('href');
var spanText = link.find('span').first().text();

How to remove cloned elements

With Jquery, I am trying to make a function similar to the filtering system used in this website(example)
If you click one of the filter elements, it will be displayed in another area. You can remove the selected filter by just clicking it.
My code works for cloning a filter element and displaying it in another area but
I am having a trouble with removing it.
I did hours of research but could not find any solution so your help will be greatly appreciated!
Here is my code
---html---
<div id="filter-selected>
<ul>
<!--selected element comes here -->
</ul>
</div>
<div id="filter-options">
<ul>
<li>
<!--clicking this list will clone itself to the above area-->
<span>Value1</span>
</li>
<li>
<!--clicking this list will clone itself to the above area-->
<span>Value2</span>
</li>
</ul>
</div>
---Jquery---
$('#filter-options > ul > li').click(function(event){
var $filter = $(this).children('span').clone();
$filter.appendTo('#filter-selected > ul').wrap('<li class="filtering"></li>');
});
$(.filtering').click(function(){
$(this).remove();
});
Since the elements are created dynamically, You need event delegation
$('#filter-selected').on('click', '.filtering', function(){
$(this).remove();
});
You are missing string quote on left side ' of .filtering which might be a problem.
$(.filtering').click(function(){

How to open a new jsp page with JavaScript

I have the following dropdown menu how can i redirect each menu to corresponding page by clicking each of menu? is it possible by using one javascript function if yes how?
thanks in advance...
<div>
<ul>
<li id=home onclick="show(this.id)">Home</li>
<li id=collection onclick="show(this.id)>Collection</li>
<ul>
<li id=men onclick="show(this.id)>Men</li>
<li id=women onclick="show(this.id)>Women</li>
</ul>
<li id=contact onclick="show(this.id)>Contact</li>
</ul>
</div>
Yes you can.
Use window.open("URL") in your case URL is this.id
Also you can update window.location
read more here http://www.tizag.com/javascriptT/javascriptredirect.php
Like Niko said you need closing quotes
.. onclick="window.open(this.id)" ..
If you only need o JS function to redirect based on a parameter that, in your case, is the component ID, this will do the work:
<script type="text/javascript">
var show = function(id) {
window.location.href = id + '.jsp';
};
</script>
If you want to navigate DOM and get link's href attribute use:
document.getElementById(id).firstChild.href
Considering that the first element inside the component referred by ID is a link tag.
Try this?
$("div > ul li a").click(function() {
window.location.href += "/" + $(this).parent()[0].id;
});
I tried to use a selector that didn't modify your HTML, so that's why it looks so icky.
This makes no sense.
I understand that your particular functional requirement is to invoke the link when the enduser clicks somewhere in the space of the <li> outside the link. To achieve that just set the CSS display property of the <a> element to block. This way the link will span the entire space of its parent element.
<ul id="menu">
<li>Home</li>
<li>Collection</li>
<ul>
<li>Men</li>
<li>Women</li>
</ul>
<li>Contact</li>
</ul>
with this CSS
#menu li a {
display: block;
}
No need for ugly JavaScript hacks. Opening a new JSP page location in the current window is by the way to performed by window.location = 'some.jsp';. But this is not necessary if you use the right solution for the concrete problem. In the future questions, try to elaborate more about the functional requirement instead of concentrating only on the solution of which you thought that it's the right solution for the particular functional requirement.

Categories