select outer and child ,without inner div - javascript

<div class="outer">
<div class="inner">
<div class="child">
</div>
</div>
</div>
I want to select outer and child only. But selecting outer will include inner and child. If I used not ie $(".outer , .child").not(".inner"), it will exclude child too.
ie I want to select outer and child ,without inner.

As you can't select it perfectly using a single query, you'd be better taking it out of the DOM (You can't get the results you want as is)
//So clone it it from the dom
var outer = $('.outer').clone();
var child = $('child').clone();
// Remove the `Inner` from the cloned version
outer.find('.inner').detach();
// Add the child to the outer.
outer.append(child);

You can use:
$('.outer, .outer :not(.inner)')

just use .outer,.child:
$('.outer,.child')

Use like this:
$('.outer .child').not('.inner .child');
demo
Or, how about using this:
$('.outer > .child')
demo
Or, are you referring like this:
$('.outer, .outer .child').not('.inner .child');

Related

javascript variable as selector in jquery to get specific child elements

I have the following structure in DOM:
<div class="parent">
<div class="child0"></div>
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
<div class="child5"></div>
...
</div>
what i try to do in javascript is to show only specific elements and hide the others like this:
showItems(0,3,'.parent'); // show child 0,1,2
function showItems(offset,limit,component)
{
$(component).children().hide();
for(var i=offset;i<=(offset+limit);i++)
{
$(component+':nth-child('+i+')').show(); //!!! does not make them visible
}
}
any idea?
Thanks!
You need a space between component and :nth-child. because now you are selecting any element with class "parent" that's also the nth-child.
You should make it easier and use the .eq() method instead, like this:
function showItems(offset,limit,component)
{
$(component).children().hide();
for(var i=offset;i<=(offset+limit);i++)
{
$(component).children().eq(i).show(); //this will work!
}
}
Just to add to the answer by Remco, add '>' to make sure you select only one of the immediate childs.
So, one way can write
$(component+' > :nth-child('+i+')').show();
or even better
$(component+' > div:nth-child('+i+')').show();
If you do not place the '>' symbol, it can also select the elements inside child divs, if it is present.

Target the child only not the sub-child by Jquery

If I have the following Markup
<div class='parent'>
<div class='first'>
First Child
<div class='second'>
Sub-child
</div>
</div>
</div>
and Below is Jquery
$('.parent').children().css("color","#00b3ff");
In result it changes color of both child,as I want to select the First child only (not by class).
how about something like this:
$('.parent').children().css('color', '#00b3ff').find('> div').css('color', 'black')
By using '>' the rule will be applied only on the immediate children, rather than all the children (when using .children())
Another thing you need to do is to ensure the child will not inherit the parent's color, can be done by explicitly giving it color.
Here's JSFIDDLE
You can't simply do it like that, the css properties are inherited by the chidlren - so if you apply a color to first it will get inherited by second since it is a decedent of first
Since we cannot apply style to text nodes a possible solution is to wrap the text node with an element and style it as given below
$('.parent > div').contents().filter(function(){
return this.nodeType == 3 && $.trim($(this).text()).length > 0;
}).wrap('<span />').parent().css('color', '#00b3ff');
Demo: Fiddle
DEMO
var sel = $('.parent').children();
var old_color = sel.css('color');
sel.css('color', '#00b3ff');
sel.children().css('color', old_color);
No one post it, so, using only CSS:
DEMO
.parent > div{
color:#00b3ff;
}
.parent div div {
color:black;
}
$('.parent').next('div').css("color","#00b3ff");
$(".parent > div:eq(0)").css("color","#00b3ff");
$(".parent > div:first").css("color","#00b3ff");
$('.parent').children( '.first' ).css("color","#00b3ff");

jQuery select child of closest element

Basically I want to be able to select the div level2 parent from the child level4 div. My application does not has such classes, otherwise I'd just select level2 :)
<div class="level1">
<div class="level2">
<div class="level3">
<div class="level4"></div>
</div>
</div>
<div class="level2"> <!-- this is hidden -->
<div class="level3">
<div id="start" class="level4"></div>
</div>
</div>
</div>
I start with $('#start') and search for the first parent which is visible, but I'm not seeing a way to return the child of that parent. Searching for $('#start') inside the parent seems very wasteful as I start with a sub child to begin with.
$('#start').closest(':visible') // returns level1
$('#start').closest(':visible').first() // returns the first level2. I can't just use second because the number of level2s can change.
$('#start').closest(':visible').children().each(function(){ /* do some search to check it contains `$('#start')` }) // seems very wasteful.
Another way to look at what I'm trying to say would be; start in the middle, find the outside (the visible element), and move one element in.
How about this:-
$('#start').parentsUntil(':visible').last();
This will give you all hidden parent div's until its visible parent and last() wil give the outermost parent which is hidden. last is not a selector on position it is the last() in the collection.
You want the .has() method
Description: Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
$('#start').closest(':visible').children().has('#start');
See fiddle for example.
You say that the classes don't exist...why not add them? It would make thinks much easier to find. The class names don't need to have actual styles associated.
var allLevel4 = $('#start').closest(':visible').find('.level4');
var firstLevel4 = $('#start').closest(':visible').find('.level4')[0];
var secondLevel4 = $('#start').closest(':visible').find('.level4')[1]; //also, #start
Use .filter():
$('#start').closest(':visible').children().filter(':first-child')
.find() is also good for selecting pretty much anything.

find index of child using jQuery?

If I have an html structure like:
<div id="parent">
<div class="child first">
<div class="sub-child"></div>
</div>
<div class="child second">
<div class="sub-child"></div>
</div>
<div class="child third">
<div class="sub-child"></div>
</div>
</div>
and I have a click handler defined through ($('#parent.child')).click() and then I click on the div with the class of second (first, second, third classes have simply been added to make demo clearer) is there a simple way to get the number 1 as it is the second child? (0 based index)?
Something like $(this).index
Just have a look at the jQuery API. The method you suggest, index, is exactly right:
$('#parent .child').click(function() {
var index = $(this).index();
});
From the docs:
If no argument is passed to the .index() method, the return value is
an integer indicating the position of the first element within the
jQuery object relative to its sibling elements.
Also note that I've changed the selector slightly from your example. I'm guessing that was just a typo in your question though. #parent.child will look for an element with ID "parent" and a class of "child", but you actually want #parent .child (note the space) to find elements with class "child" that are descendants of an element with ID "parent".
The index() method can be used for getting the position of an element inside a collection. In basic circumstances, $(this).index() should work.
But with more specific collections, you can get the position with collection.index(item). Imagine adding something simple into your #parent that should not be counted when measuring index() (a span, img, anything). With the simple method, your code is likely to break, but with the specific method, it won't.
Something like this should work for you:
var $children = $('#parent .child').click(function​ () {
console.log($children.index(this));
});​
jsFiddle Demo

How can I say this in jQuery?

I want to append some text after 2 closing divs to a sector element.
Click me
</div>
</div>
// this is where I want to append the text
My code appends the text after the link. How can I say "append it after the 2nd closing div"?
$('a.thingIClicked').click(function() {
$(this).append('hello');
});
The most direct way to do this is to find the second parent <div> element, and then insert the text after it.
$('a.thingIClicked').click(function() {
$(this).parent("div").parent("div").after("some text");
});
This will insert the text on the outside of the second <div> parent. Using append() will put the text on the inside of the parent, which from your example doesn't appear to be what you want.
There's probably a more elegant solution, but how about:
$('a.thingIClicked').click(function() {
$(this).parent().parent().after('hello');
});
Edit: #Zack is correct (and should probably get the answer credit for this one) - my original code would have added the text into the second enclosing div, rather than after it. I've edited my code above accordingly.
The easiest way would be to give the outer div an id and then use $("#outerdivid").
EDIT: Below will not work, but leaving it here for reference
However, you should also be able to use a jquery :parent filter:
http://api.jquery.com/filter/
$('a.thingIClicked').filter(':parent').filter(':parent').click(/**/);
Use .insertAfter()
http://api.jquery.com/insertAfter/
<div class="container">
<h2>Greetings</h2>
<div>Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it after several elements at once:
$('<p>Test</p>').insertAfter('.inner');
Use .insertAfter() - http://api.jquery.com/insertAfter/
<div class="container">
<h2>Greetings</h2>
<div>Hello</div>
<div class="inner">Goodbye</div>
</div>
We can create content and insert it after several elements at once:
$('<p>Test</p>').insertAfter('.inner');

Categories