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.
Related
I know how to access HTML elements using:
document.getElementById(element_ID);
but what if there's no ID attributes?
Example:
<ul data-vehicle="Car">
<li data-model="Sedan">2.5HP</li>
</ul>
You can use document.querySelector("[data-model='Sedan']") but keep in mind that querySelector is not supported on IE7.
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 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>
I'm having an issue with using Jquery toggle on a feed. I have a hyperlink called Tags. When i click on this it toggles a div underneath it.
It works - But only for the top post in the feed - If I have any other posts in the feed it doesn't work.
Below Is Jquery:-
<script type="text/javascript">
$(function () {
$("#hypfeedTagBtn").click(function() {
$("#divPostBodyTags").toggle();
return false;
});
});
</script>
Below is HTML:-
<div id="divPostFoot_64" class="dPostMain dPostFoot">
<span id="Content_ucFeeds_repFeedThread_lblFeedViewCouont_0" class="spFootReplyCount"></span>
<span id="Content_ucFeeds_repFeedThread_lblFeedShareLink_0" class="spFootLinks"></span>
<span id="Content_ucFeeds_repFeedThread_lblFeedDeleteLink_0" class="spFootLinks"></span>
<a id="hypfeedTagBtn" class="spFootLinksShowTags">Tags</a>
<a id="Content_ucFeeds_repFeedThread_hypFeedMessageMe_0" class="spFootLinks" href="/Mail/NewMessage.aspx?FeedID=64">Message Me</a>
</div>
<div id="divPostBodyTags" class="dPostMain dPostTAGSDIV" style="display: block;">
<ul id="PostBodyTags">
<li class="TAGLiItem">
<a class="TAGaItem">Plumbers</a>
</li>
<li class="TAGLiItem">
<a class="TAGaItem">Plumbers</a>
</li>
</ul>
</div>
Thanks
Steve
MDN element.id
The ID must be unique in a document, and is often used to retrieve the
element using document.getElementById.
In some documents (in particular, HTML, XUL, and SVG), the id of an
element can be specified as an attribute on the element like so: .
However you can't use this attribute in a custom XML document without
correctly specifying the type of the id attribute in the DOCTYPE.
Other common usages of id include using the element's ID as a selector
when styling the document with CSS.
Note that IDs are case-sensitive, but you should not create IDs that
differ only in the capitalization (see Case Sensitivity in class and
id Names).
Use a class instead of an id if you want to toggle more than one section.
hi i have this code
html code
<ul>
<input type="button" onclick="appear()"/>
<li id="addQuestionChoices">roma</li>
</ul>
css code
#addQuestionChoices{display:none;}
javascript code
function appear()
{document.getElementById('addQuestionChoices').style.display="block";}
but when i press the button , nothing happend, is javascript doesn't work with LI tag ? or what ?
thank you for answering
The <li> tag must be inside an <ul> or <ol>, and the only allowed children for <ul> and <ol> are <li> tags. This means your <input> should be outside the <ul>:
<input type="button" onclick="appear()"/>
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
just be sure to define the function before, like in this fiddle: http://jsfiddle.net/2dUfa/
<script>
function appear() {
document.getElementById('addQuestionChoices').style.display= "block";
}
</script>
<input type="button" onclick="appear()" value="appear" />
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
As a sidenote: the default display property of a <li> element is list-item (and not block)
It's bad practice to embed JavaScript calls within HTML. It makes the code much more maintainable when the functionality, style and markup are kept seperate. Secondly your <li> element should be nested within either a pair of <ul> or <ol> tags.
I have written a jsFiddle example of how you could tackle this task:
http://jsfiddle.net/dLqja/1/
In this code I have created a 'click' listener, this is attached to your button via its id. Upon the button press it triggers an anonymous callback function which dynamically changes the display style of your 'li' element.
Inclusion of jQuery
Make the following is the first JavaScript that you include in your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
This jQuery script is hosted by Google, which has its advantages such as (it's probably already cached in the clients browser from visiting a previous website using it).
Any JavaScript code which you write which uses the functionality of jQuery should be included after the above script.
None jQuery Version...
You can achieve a similar result as the above by assigning an event listener to the button. This approach is preferable to using onclick="..." as sticks to the rule of seperating functionality from markup. If none of these answers work you should check your browsers console for error messages.
http://jsfiddle.net/SvufY/1/
Try putting the <li> inside of a <ol> or <ul> tag.
You should avoid using inline Javascript code, and instead focus on keeping it separated. Attach your event handler to the object in a script tag (or, better yet, a script file loaded at the end of the document), something like this:
<input id="clickButton" type="button" value="submit" />
<ul>
<li id="addQuestionChoices">roma</li>
</ul>
<script>
document.getElementById('clickButton').onclick = function() {
document.getElementById('addQuestionChoices').style.display="block"
};
</script>
You can see a working example of this at http://jsfiddle.net/xxgdB/
Note also you can use either list-item or inherit in the display field to achieve the same effect.