let's say I have an HTML structure like this:
<div class="first">
<div class="sub-1">
<div class="first again"></div>
</div>
</div>
How do I select only the div that has the class "first" but which is NOT inside the div that has the class "sub-1". In order words, how do I get only the outer div but extract any div inside that outter div that have the same class than the outter div (I want to get just the div with class="first", not the one with class="first again").
Thank you
See jQuery documentation for .not(). This should work:
$('.first').not('.sub-1 .first');
I dont know if you mean a very generic way to handle this but in this particular case you can only write.
$(".first:first")
A more generic way would be
$('.first').not('.sub-1 .first').prepend("I was first");
http://jsfiddle.net/JYLVc/
Related
I'm looking for a way to select the first child element of multiple parent divs, of which the parent divs have the same class. This is my HTML:
<div class="wrapper">
<p>Select this paragraph</p>
</div>
<div class="wrapper">
<img src="https://picsum.photos/200/300" title="Select this image">
<p>Don't select this</p>
</div>
<div class="wrapper">
<p>Select this paragraph</p>
<p>Don't select this paragraph</p>
</div>
Please see my full CodePen Here.
I'm trying to select the first child element of each div with the class wrapper and apply the same class to all of these child elements. I was looking at something in the lines of this:
$('.wrapper').children(":first").addClass("noMargin");
The problem with this is that it only selects the child element of the first parent div, but it doesn't select the img and the first p of the third wrapper. I figured you need some kind of array for this and apply a class to all of them, but how can I achieve this (with preferably jQuery)?
You're close, what you need is to go through the elements that have the .wrapper class and append the noMargin class to their first children i.e
$('.wrapper').each(function() {
$(this).children(":first").addClass("noMargin");
});
you can use following sample it is working fine
$('.wrapper :nth-child(1)').addClass("noMargin");
or another syntax
$('.wrapper :first-child').addClass('noMargin');
I know this is a simple thing to do but can't get my head around what I'm doing wrong. I have a h2 tag which will run a function on click, this will then locate a div with the class 'homeSlide' and then run the slideToggle method. However I can't seem to get the content to slide without making the two divs below with the same class name also slide.
Here is my HTML:
<h2>Header</h2>
<div id="home_newproducts_list">
<div class="category-products">
<ul class="products-grid">
<li>Hold fetured products so will be excluded from the slideToggle</li>
</ul>
<div class="homeSlide">
<!-- Content that needs to be displayed on slide -->
</div>
</div>
</div>
Jquery:
jQuery(document).ready(function(){
jQuery("#home_newproducts_list ul.products-grid").not(":first").wrapAll('<div class="homeSlide">');
jQuery(".home-spot h2").click(function(){
jQuery(this).next('.homeSlide').slideToggle(1000);
});
});
I hope i've explained it in enough detial.
So all I want to be able to do is run the slideToggle method on the homeSlide div, but only on the next one after the h2.
jQuery(".home-spot h2")
assuming you are selecting the <h2>Header</h2> element here
try with next() and find().
jQuery(this).next().find('.homeSlide').slideToggle(1000);
next() gets the immediately following sibling which is div#home_newproducts_list in your case
I have the next code dynamically created using JQuery. Theere are multiple row class divs placed one under the other.
<div class="row">
....
</div>
<div class="row">
<div class="line_type"></div>
<div class="download_value"></div>
<div class="flag"></div>
<div class="email"></div>
<div class="prize"></div>
</div>
<div class="row">
....
</div>
After i create these divs I have a "pointer" to a specific div which is of class row. In JQuery, how do i make it so I go down the DOM tree, until i reach the div of class line_type and download_value and remove them both, and also I'd like to go one more node down, at the div of type email and change some of it's CSS attributes.
I was not able to find anything on the web, maybe it's cause i'm a noob at these still.
I have a "pointer" to a specific div which is of class row ->
Assuming that you have the this object of the corresponding div with class row.. then you can use .find to get the line_type and download_value inside that div.
$(this).find('.line_type').remove();
$(this).find('.download_value').remove();
Then you can use the same .find to get the div with class email and access the .css
$(this).find('.email').css(/* You code*/);
Assuming row_pointer points to the row in question:
$('.line_type, .download_value', row_pointer).remove();
$('.email', row_pointer).css(...);
check this out
$('div.row').bind('click', function() {
$this = $(this);
$('div.line_type, div.download_value', $this).remove();
$('div.email', $this).css('background-color', 'red');
});
http://jsfiddle.net/YvyE3/
Suppose i have this structure of elements:
<div class="parent">
<div class="something1">
<div class="something2">
<div class="something3">
<div class="something4"></div>
</div>
</div>
</div>
</div>
And code like this:
$(".something4").click(function(){
//i could do it like this...
$(this).parent().parent().parent().parent().parent();
});
But that seems to be stupid, is there a better way to do this?
also i can't just say $(.parent) because there are many divs like this with class parent in my page.
Use .closest(selector). This gets the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.
$('.something4').click(function() {
$(this).closest('.parent');
});
Use .closest():
$('.something4').click(function() {
$(this).closest('.parent');
});
I think you should try this
$(this).parents(".parent");
But I don't know where on the page are the other divs with this class :)
You could always use .parentNode (standard JavaScript). It's generally a bad idea to use class names that coincide with function/variable names from the library you're using (this goes for any language). Making your class names more unique is a better approach (for instance, "scparent" instead of "parent", if the name of your application was "Super Calculator" or something). This avoids conflicts such as the one you're describing.
I would caution using .closest(), simply because you may create a function like this:
function getParentElem() {
return $(this).closest('div');
}
And it would grab the parent div's in your code just fine, but if down the road you add a table for displaying data, and you run the function through a child element of the table, you will have to create another implementation that selects the table element, because that's what you now want:
<div id="tableParent">
<table id="dataTable">
<tr id="target1">
<td>Some data.</td>
</tr>
</table>
</div>
By using your function getParentElem() on the tr element, you'll end up grabbing the div with id="tableParent", rather than the actual parent, which is the table element. So, unless you've delineated your parent classes appropriately all the way through your code (which can be a pain and isn't always efficient), you may run into problems. Especially if at any point you're creating elements programmatically, or reading in data from another 3rd-party library or script.
Not saying it's not good to use .closest()... just pointing out a possible "gotcha".
i would suggest adding to the div parent an id like 'parent_1' etc. and in every son you keep the id in the rel attr
<div id="parent_1" class="parent">
<div rel="1" class="something1">
<div rel="1" class="something2">
<div rel="1" class="something3">
<div rel="1" class="something4"></div>
</div>
</div>
</div>
</div>
$(".something4").click(function(){
//i could do it like this...
$('#parent_' + $(this).attr('rel'));
});
I have a code something like this:
<div id="specialDiv">
<div id="div1">
<div id="div2">
</div>
</div>
<div>
The div1 and div2 are hidden and right now in order to display them i am doing something like this:
$('#div1').show();
$('#div2').show();
It works but is there an elegant way to do this other than
$('#speicalDiv div').show();
Thanks.
You can use a multiple selector:
$("#div1, #div2").show();
$('#specialDiv div').show(); will show all div inside #specialDiv.
However, you don't have to hide the divs inside at all - hiding the parent is sufficient.
If you just wanted to show divs directly inside #specialDiv (in your case: #div1), you could select those using #specialDiv > div.
If you wish to add a class to the hideable divs, you can reference the class in the show()/hide() statements.
Otherwise, your method looks as elegant as possible.
Put the divs into a class. i.e.
$('.toshow').show();
Then they can be anywhere on the page and could be other things than divs if required.
Similar to what you've already suggested, you could do something like:
$('#specialDiv div').show();
But a more flexible approach would be to add a new class name to the divs you want to show:
<div id="specialDiv">
<div id="div1" class"hidden">
<div id="div2" class="hidden">
</div>
</div>
<div>
Then show them like so:
$('#specialDiv .hidden').show();