I am trying to use AngularJS to grab the element by tag name.
For example,
angular.element(document.querySelector('h1')).css('color', 'green');
element in HTML:
<div>
<h1>Title 1</h1>
</div>
<div>
<h1>Title 2</h1>
</div>
It works only for the first element but not the second one. I am not sure the reason for it. Can anyone help me about it? Thanks a lot!
As #Tushar mentioned, the best way to handle this is with ng-class. Let Angular do the DOM manipulation for you
Your CSS
.someclass{
color: green
}
Your HTML
<div ng-class="{'someclass': obj.value == 'somevalue'}">
<h1>Title 1</h1>
</div>
<div>
<h1>Title 2</h1>
</div>
After 'someclass', in your controller, you can insert whatever expression makes the most sense. When your expression evaluates to true, the 'someclass' will be applied to your Div.
The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.
The querySelectorAll() method returns all elements in the document that matches a specified CSS selector(s), as a static NodeList object.
Related
I want to add html tag without ending tag like that <div class="bottom-widget"> . For that I use jQuery prepend() method but full tag was added by this !
Html Markup -
<div class="widget">
<h2>this is content 1</h2>
</div>
</div>
Javascript Code :
$(".widget").prepend('<div class="bottom-widget">');
Perhaps you are looking for wrapInner function.
And you code will be:
$(".wrapInner").wrapInner("<div class='bottom-widget'>");
I assume you need correct html so after this opening tag you will have another with closing one. For this reason you can use jQuery wrapInner function (http://api.jquery.com/wrapinner/)
First extract(or create) the element you want to be wrapped in your bottom-widget element, than create bottom-widget element and insert above-mentioned element into it.
$(".widget").prepend("<div class='bottom-widget'></div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">
<h2>this is content 1</h2>
</div>
I am a beginner and I am using pure javascript for DOM manipulation. I am not able to get all the divs in my section element. I get undefined. Please tell me what is the error and how I can fix it.
HTML
<section class="main-content">
<aside>
<p>
<span class="sidebartext">Watch this space for breaking news items.</span>
</p>
</aside>
<section class="notes">
<div id="Services" class="nav-pages active">Services</div>
<div id="Resources" class="nav-pages">Resources</div>
<div id="Contact-Us" class="nav-pages">Contact Us</div>
<div id="Company" class="nav-pages">Company</div>
</section>
</section>
JS
var navTabs = document.getElementsByClassName('notes').children;
console.log(navTabs);//undefined
No jQuery answers please !!!
getElementsByClassName returns an array of elements (actually, array-like - see #Hamms comment below), so children is undefined on it. If there's only one notes section, you can choose to use id="notes" instead (with getElementById) or iterate through the above array and access children from that.
That happens because getElementsByClassName returns an HTMLCollection or NodeList. If you console log just that element, "notes" you will see why you are getting an undefined.
Replace your JS code by:
var navTabs = document.getElementsByClassName('notes');
console.log(navTabs);
That will output an array which once expanded, it will show the content of the position [0]. If you expand that one you will get your NodeList labeled as childNodes. Expand it and you will get your divs.
Try this to get directly your divs:
console.log('Items: ',navTabs[0].childNodes);
Consider this DOM :
<div id="div1">
<div class="no-select-inside">
<p>Don't select me</p>
</div>
<div>
<p>Select me</p>
<div><p>Select me too</p></div>
</div>
<div>
<p>Select me</p>
<div><p>Select me too</p></div>
</div>
<footer class="no-select-inside">
<p>Don't select me</p>
<div><p>Not me</p></div>
</footer>
<section>
<p>Select me</p>
<div><p>Select me too</p></div>
</section>
</div>
I want a fast and reliable jquery (or bare DOM) selector to select those p tags that not inside 'no-select-inside' class
Everything is dynamic, but I can assign an attribute to not selectable DOM element.
Edit
The real test case isn't a class selector (maybe a complex attribute selector, ...)
Everything is dynamic and could be too deep nested (100 down to DOM tree under a no-select-inside there is p that has a no-select-inside parent and with all the answer even those elements are selected)
I have all no-select-inside cached (Backbone's $el and can be cached in an array for performance) but real problem is selecting those elements in a fast way (20ms in chrome is too slow!).
The general-purpose solution would be to filter out those that have a .no-select-inside ancestor, for example:
$("p")
.filter(function() { return !$(this).closest(".no-select-inside").length;})
// and now do what needs to be done
This should be reasonably efficient because it only goes over the whole document just once.
Try using .not() or :not() to filter out the p elements inside no-select-inside
$('#div1 p').not('.no-select-inside p')
$('#div1 p:not(.no-select-inside p)')
Try this:
$('div:not(.no-select-inside) p')
You can use .not as the working example is here
$(document).ready(function(){
var abc = $('#div1').find("p").not('.no-select-inside p');
$(abc).each(function(e){
alert($(this).html());
});
});
http://jsfiddle.net/8F7Kc/14/
A simple example is confusing me about selector in jQuery.
I have this html code:
<div class="container">
<h1>Welcome to my Website </h1>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
if I want to highlight the second paragrah I think that this is the right way:
$('p:nth-child(2)').css("background-color","yellow");
But this is not correct, in fact the First paragraph will be highlighted, even if I have only two <p> section and I'm putting the value 2 inside the nth-child() function.
Here the related jsfiddle
If I remove the <h1> element, the second paragraph will be highlighted. So, it seems as if the <h1> element is treated as <p> element by jQuery selector.
However the code:
$('p:nth-child(1)').css("background-color","yellow");
will not highlight anything. Why this happens?
nth-child means literally "child in place n", what you're searching is nth-of-type , have a look: http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/
So this will work as you expect:
$('p:nth-of-type(2)').css("background-color","yellow");
JSFiddle: http://jsfiddle.net/t2rn7/
:nth-child is with respect to the parent, so in your first example that <p> is in fact the 2nd child. If you want it to be the second p, you should use :nth-of-type
I'm trying to remove all the sibling elements after a particular div, lets say the div tag with id = id8.
<form>
<div id="id5">something ...<div>
<div id="id8">something ...<div>
<div id="id3">something ...<div>
<div id="id97">something ...<div>
<div id="id7">something ...<div>
...
<div id="idn">some text ...<div>
</form>
To do that I use the following code in jquery.
$("#id8 ~ div").remove();
It works fine in Firefox, but It doesn't work in IE7.
Is there an alternative way to archieve this, using jquery and just giving the tag id from the element I want to start removing the elements?
Thanks
Thanks everybody for your help
I end up with this solution based on the accepted answer
function removeAfter(el,tag){
element = $('#'+el);
var aElements = $(tag,element.parent());
var index = (aElements.index(element));
for(i=(index+1);i<aElements.length;i++) {
$('#'+$(aElements.get(i)).attr('id')).remove();
}
}
just call
removeAfter('id8', 'div')
Two things!
1) Close your <div> tags! It should look like this:
<form>
<div id="id5">something ...</div>
<div id="id8">something ...</div>
<div id="id3">something ...</div>
<div id="id97">something ...</div>
<div id="id7">something ...</div>
<div id="idn">some text ...</div>
</form>
2) The ~ operator only matches siblings that follow the matched element (ie it will match id3, id97, id7 and idn, but not id5). To match every sibling, including id5, you do this:
$("#id8").siblings("div").remove();
That should leave you with just id8. I tested this in Firefox 3.5.5 and IE7.0something. Hope that helps!
Three steps here:
Find the index number of the element we've clicked, with respect to its parent.
Loop through all the div elements contained within this parent, starting after the one we just found
Delete each div found
$(document).ready(function(){
$('#parent').children().click(function(){
var index = ($('div',$(this).parent()).index(this));
for(i=(index+1);i<$('div',$(this).parent()).length;i++){
$($('div',$(this).parent()).get(i)).hide();
}
});
});
This will work on this HTML
<div id="parent">
<div id="c1">c1</div>
<div id="c2">c2</div>
<div id="c3">c3</div>
<div id="c4">c4</div>
<div id="c5">c5</div>
</div>
Comment here if you've got any more problems on the matter!
P.S. An application of this solution exact to your request is the following
function removeAfter(el){
element = $('#'+el);
var index = ($('*',element.parent()).index(element));
for(i=(index+1);i<$('*', element .parent()).length;i++){
$($('*', element.parent()).get(i)).hide();
}
};
EDIT:
Editing the answer below to add what should be a fix for the problem:
$("#id8").nextAll().remove();
END EDIT.
Ok. This appears to be an interesting bug - initial testing seems to indicate it's a jquery bug although I haven't found any specific mention of it anywhere.
The bug seems to be that if your initial selector tag is the same type as its siblings then it will fail to return any siblings in IE7.
I tested it using the jQuery example code for the selector itself and was able to duplicate your problem in IE8 emulating IE7.
If you check the jquery example code I'll stick below you can see that the actual element they're using as the initial selector is a span and the sibling elements are all divs whcih seems to me to indicate they know about this bug and haven't documented it, which is both cunning and shitty.
<script>
$(document).ready(function(){
$("#prev ~ div").css("border", "3px groove blue");
});
</script>
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
Change the #prev span to a div and you'll get the same failure as you're getting currently. I'd submit a bug with the jquery team.