I have some problem in getting the length of the div with particular class.
HTML
<div class="sampleDiv">
<div class="e"></div>
<div class="e"></div>
<div class="list-tasks12">
<div class="slot"></div>
</div>
<div class="list-tasks12">
<div class="slot"></div>
<div class="slot"></div>
<div class="slot"></div>
</div>
</div>
JS
alert($(".sampleDiv").find('.list-tasks12:nth-child(1)').find('.slot').length)
Here it is showing length as zero which is wrong.
Please help what i am doing wrong
Demo Here
Try this
$(".sampleDiv").find('.list-tasks12').eq(0).find('.slot').length
The alert is not working properly because the <div class="e"></div> are also children of the parent div. You should remove them from the <div class="sampleDiv"> container or count them also - so if you want the first child <div class="list-tasks12"> you should count the two <div class="e"></div> containers and use the following script:
alert($(".sampleDiv").find('.list-tasks12:nth-child(3)').find('.slot').length);
For the second <div class="list-tasks12"> child you should use:
alert($(".sampleDiv").find('.list-tasks12:nth-child(4)').find('.slot').length);
Here is a jsfiddle for it: https://jsfiddle.net/b1hsp30j/
Related
This is the scenario. The black element has an ID and theoretically I want to select like this:
$("#someid .class2")...
I don't want to get the element inside the red element though. And yes, the classes are written correctly, the red element and black have the same class...
Also, there may be elements between any of these elements (like in nested - the green element inside the red one might be nested inside multiple other elements, so the red one is not necessarily the parent)
So basically ignore all class1 elements other than itself.
How can I get this?
Edit: I added 2 examples. The query, whatever it is, should work for both.
Example 1
<div id="someid" class="class1">
<div class="class1">
<div>
<span class="class2"></span> <---- NO
</div>
</div>
<div>
<span class="class2"></span> <-----YES
</div>
</div>
Example 2
<div id="someid" class="class1">
<div>
<div>
<div class="class1">
<div>
<span class="class2"></span> <---NO
</div>
</div>
<span class="class2"></span> <-------YES
</div>
</div>
<div class="class1">
<span class="class2"></span> <--------NO
</div>
<span class="class2"></span> <-----------YES
</div>
console.log(document.querySelectorAll("#test1 > .class2"))
<div id="test1" class="class1">
<div class="class1">
<div class="class2">test 3</div>
</div>
<div class="class2">test 1</div>
</div>
In this example im using vanilla javascript but with jQuery the css selector it would be the same.
I have some HTML, like this:
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>
Is there a way using jQuery to insert the plain text Bar directly in between #foo2 and #foo3, so the resultant HTML would be like this:
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
Bar
<div id="foo3">foo3</div>
</div>
I am able to put the text in with a <span> tag using $("<span/>").text("Bar").insertAfter("#foo2"), but is there a way to just put the plain text there, without a <span> around it?
You can use .after:
$('#foo2').after('bar');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>
Use document.createTextNode("bar"):
$("#foo2").after(document.createTextNode("bar"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>
In the case you need an alternative with plain JavaScript, you can use insertAdjacentText()
document.getElementById('foo2').insertAdjacentText('afterend', 'bar');
<div id="parent">
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
<div id="foo3">foo3</div>
</div>
In case you are interested, the first argument provides other alternatives:
element.insertAdjacentText(position, element);
position
A DOMString representing the position relative to the element; must be one of the following strings:
'beforebegin': Before the element itself.
'afterbegin': Just inside the element, before its first child.
'beforeend': Just inside the element, after its last child.
'afterend': After the element itself.
element
A DOMString representing the text to be inserted into the tree.
I'm creating a website and I'm having some trouble with javascript. I have this function:
function offerboxclick(obj) {
obj.classList.toggle("menuelementclicked");
}
and my html looks like this:
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
<level>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 1</div>
</div>
</level>
</div>
<div class="menuelement" onclick="offerboxclick(this)">
<div class="arrowbox">
<div class="stripe1"></div>
<div class="stripe2"></div>
</div>
<div class="menutext">Menu level 0</div>
</div>
The css code I think isn't relevant, because the problem is probably with the js function. As you can see, I have a multi level menu, and it works just fine when I'm clicking on the level 0 element to show hidden level 1 elements. But when I click any of the level 1 elements, the js function does work properly on the object, because it toggles "menuelementclicked" class on it. The problem is that it also toggles this class in parent menu element, so at the same time it opens level 2 and closes whole menu. I don't really know what to do now. Any help would be appreciated!
P.S. I tried putting my code on jsfiddle to show you all of it but for some reason on it doesn't work there at all 0_o
Inside row two individual div how can one right hand side dive fixed when scrolling page then fixed and when come footer area then up this fixed div.
This is my code example below:
I want col-md-4 class fixed when come footer content then up.
<div class="container">
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4">
</div>
</div>
</div>
Demo- http://jsfiddle.net/3RkM3/41/
Layout-
<div class="row">
<div class="col-xs-8 content">Content</div>
<div class="col-xs-3 col-xs-offset-1">
<div class="fixed col-xs-4">
Something
</div>
</div>
</div>
I was testing out the DHTMLXscheduler module on my application. I followed all the steps which explained setting up the module on http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:how_to_start but couldnt get it to work.
I have implemented the js and css in my header file and implemented all the necessary code. After running my application, I end up with an empty screen without any errors in my console.
Did someone ever experienced the same like this?
The code i used to initialize is exactly the same as shown on their webpage which is:
<script type="text/javascript">
scheduler.init('scheduler',null,"week");
</script>
<div id="content">
<div id="scheduler" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
I have also tried calling the init method after the html content which resulted in the same result.
The problem is solved. I had to increase the height of the inner div #content.