Parent Class inddetails-wrapper clearfix has two divs which as further classes having same name.
I want to select first class col-md-6 nopadding. How should I do that ?
Below is the code:
<div class="inddetails-wrapper clearfix">
<div>
<div class="col-md-6 nopadding">...</div>
</div>
<div>
<div class="col-md-6 nopadding">...</div>
</div>
</div>
You can use :first-child:
.inddetails-wrapper div:first-child .col-md-6 {
background: #f00;
}
<div class="inddetails-wrapper clearfix">
<div>
<div class="col-md-6 nopadding">...</div>
</div>
<div>
<div class="col-md-6 nopadding">...</div>
</div>
</div>
as this question was tagged under jquery You can select the first element inside <div class="inddetails-wrapper clearfix"> using Jquery like this:
var firstChild = $( ".inddetails-wrapper.clearfix div" ).first();
and you can play with firstChild using more jquery properties depending upon what do you need.
Related
I'm trying to hide 2 of the 3 item divs, the class name is item. I can usually use css display none, but they all have the same name, and its coming from WordPress plug in, and I believe its a template, so any changes made, it just replicates. Is there anyway I can add ID to each div which will automatically increment value by one, then I can use CSS display option?
<div class="related-post grid">
<div class="post-list">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
to
<div class="related-post grid">
<div class="post-list">
<div class="item" id="01">
</div>
<div class="item" id="02">
</div>
<div class="item" id="03">
</div>
</div>
</div>
You can use CSS pseudo classes to accomplish what you want:
.related-post .post-list .item:not(:last-child) {
display: none;
}
will hide any element with class item that is not the last element.
Or if you want to specifically target the first and second element:
.related-post .post-list .item:nth-child(1),
.related-post .post-list .item:nth-child(2)
{
display: none;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
In Javascript you could assign dynamically an id attribute to all the .item elements like so:
document.querySelectorAll('.item').forEach((i,n) => i.id = 'item_' + ++n);
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="col-lg-4 col-sm-6 col-md-4 col-xs-12">
(I want to select this div and make it hidden)
<div class="ad-pric-content">
<div class="ad-pic-style" />
<div class="ad-pric-detail">
<div class="col-lg-12 no-padding prod-fancy-btn">
<a href="javascript:void(0);"
class="btn btn-theme sb_add_cart"
data-product-id="10496"
data-product-qty="1">Sélectionnez le plan</a>
</div>
</div>
</div>
</div>
I want to select the first Div which has as child element the balise with this specific data-product-id 10496.
I can't use Css because there are also 2 others div with the same classes.
Thank you
Add a nice recognizable class to that parent. Say product
Use Attribute selector [] to find the desired element by data-*
use .closest()
If found - assign a class like "is-hidden" to .product using Element.classList and the .add() Method:
const prID = "10496";
const EL_prID = document.querySelector(`[data-product-id="${prID}"]`);
if (EL_prID) {
EL_prID.closest('.product').classList.add('is-hidden');
}
.is-hidden { display:none; }
<div class="product col-lg-4 col-sm-6 col-md-4 col-xs-12">
(I want to select this div and make it hidden)
<div class="ad-pric-content">
<div class="ad-pic-style" />
<div class="ad-pric-detail">
<div class="col-lg-12 no-padding prod-fancy-btn">
<a href="javascript:void(0);"
class="btn btn-theme sb_add_cart"
data-product-id="10496"
data-product-qty="1">Sélectionnez le plan</a>
</div>
</div>
</div>
</div>
First time question on this site. Sorry if I have failed the formatting test.
I am almost completely ignorant about javascript but I have been told I need it to solve this problem. I have a page where there are multiple divs with the same class. Each has a multi-level hierarchy beneath it. I want to stop the parent displaying if any of its children contain a div of a particular class. e.g. In the following code I want to stop all divs with class of "classa" displaying if one of their direct or indirect children contains class of "classb draft". So here, none of divb would display.
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa"
<div id="divabaaa" class="classb">
</div>
</div>
</div>
</div>
</div>
<div id="divb" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa"
<div id="divbbaaa" class="classb draft">
</div>
</div>
</div>
</div>
</div>
You are not closing div in
<div id="divabaa"
You can use querySelectorAll() to select all the children with that class (draft). Then use forEach() to loop through all the matching elements to find the closest() div with .classa to set display property to none.
var elements = document.querySelectorAll('.classa .draft');
elements.forEach(function(el){
el.closest('.classa').style.display = 'none';
});
<div id="diva" class="classa">
<div id="divaa">
</div>
<div id="divab">
<div id="divaba">
<div id="divabaa">
<div id="divabaaa" class="classb">
Without Draft
</div>
</div>
</div>
</div>
</div>
<div id="divs" class="classa">
<div id="divba">
</div>
<div id="divbb">
<div id="divbba">
<div id="divbbaa">
<div id="divbbaaa" class="classb draft">
Draft
</div>
</div>
</div>
</div>
</div>
I am currently try create a custom navigation on websites homepage that uses tiles for navigation.
I am using MVCSiteMapProvider for MVC5 to display live tiles on the homepage as well as a standard bootstrap navbar, when the user loads the homepage only the main parent navigation any values nested under the parent are hidden.
The CSHTML below is what I have managed to create so far:
<section id="content">
<div class="main-content">
#{
var nodes = MvcSiteMapProvider.SiteMaps.Current.CurrentNode;
}
#foreach (var node in nodes.RootNode.ChildNodes)
{
<div class="col-md-4 live-tile" id="#node.Key">
<div class="#node.Description">
<h3>#node.Title</h3>
</div>
</div>
foreach (var childNode in node.ChildNodes)
{
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
}
}
</div>
</section>
<script type="text/javascript">
$('.live-tile').on('click', function () {
var ids = $('.live-tile').map(function () {
return this.id;
}).get();
$.each(ids, function (index, value) {
});
});
</script>
I need some guidance on how to display multiple divs when one of the parent tiles (div) is clicked.
I only want to show the child elements, currently I am try to do this using the id of the parent div as a class on it child elements, when the parent is clicked the other top level divs should be hidden and the child elements and parent should be visible.
Any advice would be very much appreciated.
Try this:
<div class="col-md-4 live-tile" id="#node.Key">
<div class="#node.Description">
<h3>#node.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
<div class="col-md-4 live-tile" id="#node.Key">
<div class="#node.Description">
<h3>#node.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
<div class="col-md-4 hidden #childNode.ParentNode.Key">
<div class="#childNode.Description">
<h3>#childNode.Title</h3>
</div>
</div>
</div>
$('.live-tile').on('click', function () {
$('.main-content>div').not('.live-tile').addClass('hidden');// hide all divs on click
$('.main-content>div').removeClass('clicked');
$(this).addClass('clicked');
$('.clicked').nextUntil( '.live-tile', "div.hidden" ).removeClass('hidden');// now show the next hidden ones
});
How can I count the number of div's with class item that are inside the div with class outer-1? The result here should be 7.
I tried this and several other failed variations of it.
alert( $(".outer-1").$(".item").length );
This gives me 12 which is all the divs on the page.
alert( $(".item").length );
How can i specify only the outer-1 div?
Divs
<div class="outer-1">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
<div class="item">e</div>
<div class="item">f</div>
<div class="item">g</div>
</div>
<div class="outer-2">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
<div class="item">e</div>
</div>
Use find() selector:
$(".outer-1").find(".item").length ;
or
$(".outer-1 .item").length
For your html, $(".outer-1 .item").length would be sufficient, but if div.items are nested, like this
<div class="outer-1">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
<div class="outer-x">
<div class="item">h</div>
<div class="item">i</div>
</div>
<div class="item">e</div>
<div class="item">f</div>
<div class="item">g</div>
</div>
You may want to use $(".outer-1 > .item").length (all div.item that are child of div.outer-1).
See jsFiddle
if you have a bunch of outers with the same name, you may need to loop:
$('.outer-1').each(function(){
console.log( $('.item',this).length );
});