I need to find and hide all li tags in my page that have the partial class of 'fos-crs-'.
<li class="minimal-product-wrapper toggle-container fos-crs-XXX">...<li>
where the XXX is some course-code that comes from a database call. The "fos-crs" class is one I added so I can specifically find and manipulate these specific li tags. The other classes in the li tags are part of work created by off-site developers using Foundation. In other areas these have not been a problem for my JQuery.
I have tried:
$('[class^="fos-crs-"]').hide();
... and ...
$('li[class^="fos-crs-"]').hide();
Would someone tutor me in this? Much appreciated.
You are targeting the class that starts with(^) operator. Rather you should target with any occurrence(*).
i.e,
$('li[class^="fos-crs-"]').hide();
should be
$('li[class*="fos-crs-"]').hide();
http://jsfiddle.net/d4uk2fmg/
The attribute selector looks at the entire attribute, not each class in the attribute. So what you're code is looking for is elements whose class attribute starts with "fos-crs". You need to check if that string is contained within the attribute at all, so you need the * modifier.
$('li[class*="fos-crs-"]').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="minimal-product-wrapper toggle-container fos-crs-XXX">...<li>
<li class="minimal-product-wrapper toggle-container fos-crs-XXX">...<li>
<li class="minimal-product-wrapper toggle-container fos-crs-XXX">...<li>
<li class="minimal-product-wrapper toggle-container">...<li>
</ul>
Related
I'm trying to figure out how to find all elements that have a specific attribute. I haven't been able to figure it out without knowing the element beforehand. This is using plain vanilla javascript.
Use querySelectorAll and an attribute matching selector:
document.querySelectorAll('[myattribute]')
That should do the trick for you.
An example:
console.log(document.querySelectorAll('[myattr]'));
<div>
<p myattr="test">hello</p>
<ul>
<li myattr="somethingelse">world</li>
<li>!!!</li>
</ul>
</div>
Open the console and you'll see the <p> and <li> that have class myattr are returned.
I have a situation in my web application where some listed items do share common className that is used by our automated test suites. Now, I have to click on specific element and need to locate it by it's class and text of that element.
Here is an example:
<ul>
<li class="autotest-list">Milk</li>
<li class="autotest-list">Sugar</li>
<li class="autotest-list">Candy</li>
</ul>
I need a way how to click on ie.Sugar.
Something like this:
element(by.className('autotest-list').text('Sugar');
or this
element(by.className('autotest-list')&&text('Sugar');
Thank you all in advance!
element(by.cssContainingText('.autotest-list','Sugar')
If you don't mind, you could use by.xpath:
element(by.xpath('li[#class="auto test-list" and text()="Sugar"]'))
I got the following line:
$("element").find("[attr!='val'][attr!='val'][attr!='val'][attr!='val'][attr!='val']")
based on this answer.
My page stops running. My assumption is that it finds all the different elements in the page, also the ones that don't have the attribute. Is that correct?
If so how can I fix this?
I tried the
$("element").not("[attr='val']")
// instead of
$("element").find("[attr!='val']")
and it still crashed the page.
The following code works of course:
$("element").find("[attr='val']")
JQuery Has Attribute Selector [name] select element only has attribute without consider to it value. You need to adding [attr] at the first of your selector.
$("ul").find("[class][class!='A']").css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="A">A</li>
<li class="A">A</li>
<li class="B">B</li>
<li>C</li>
</ul>
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.
I have one html structure:
enter code here <ul>
<li><span>aaa</span>
<div>
<ul>
<li><span>bbb</span> </li>
</ul>
</div>
</li>
<li><span>ccc</span>
<div>
<ul>
<li><span>ddd</span> </li>
</ul>
</div>
</li>
</ul>
now what should be the exact code to access
<span>aaa</span>and <span>ccc</span>
but not span with bbb and ddd...I have used $("li span:first-child") and its working fine..is it rite I mean as per standard...bcoz I think it should ref every first child span under any li inside that html file....what should be the exact code?
This maybe because you are nesting li without ol/ul, li should be inside ol/ul not inside another li
Your HTML is not well formed. li elements aren't closed. This could be causing the problem.
So you want all the <span>s which are a direct child of an <li> which has a nested list inside it? Here's my go at it:
$("li:has(ul) > span")
Explanation, step by step:
li // find all <li>s
:has( // which have inside them
ul // a <ul> tag
) // (current context is still at the <li>
> // now find just immediate children (not grandchildren, etc)
span // ..which are spans
The result set should now be a list of <span>s whose parent is an <li> which has a <ul> descendant.
Pay a visit to http://validator.w3.org/. Browsers do amazing things in trying to build a DOM from illegal markup, but the results are often not what you expect and inconsistent across browsers.
Use correct markup — then worry about tools dealing with it in unexpected ways. See GIGO.