I need to take the text "UNIT01". How I can do this using JQuery or JS?
`<div id="unit">
<ul class="choices">
<li>
<div>UNIT01</div>
</li>
<li>
<div>UNIT02</div>
</li>
</ul>
</div>`
$( document ).ready(function() {
var txt = $('.choices li:first-child>div').text()
console.log( txt );});
This code will access the text inside that div by accessing the div through its parent elements.
var unit = document.getElementById("unit");
var list = unit.getElementsByTagName("ul")[0];
var items = list.getElementsByTagName("li")[0];
var div = items.getElementsByTagName("div")[0];
var text = div.innerHTML;
alert(text);
<div id="unit">
<ul class="choices">
<li>
<div>UNIT01</div>
</li>
<li>
<div>UNIT02</div>
</li>
</ul>
</div>
Related
I am currently am trying to get this below function working. I would like to use a relative path in order to add an active class for my different ul li a tag in my dom. The problem I am facing is that despite splitting the URL, it doesn't appear to be checking and comparing right part of the url and href. here is an of my HTML structure:
<div class="parent-bar"> <ul> <li>
<a class="parent-link" href="/dummy-parent-2/">
<div class="wrap">
<span class="text">Parent page 2
</span>
</div> </a> <div id="child-menu-1" class="child-menu">
<ul>
<li>
<a href="/dummy-parent-2/dummy-child-1/" class="child-links">
<div class="wrap">
<span class="text">child page 1
</span>
</div>
</a>
</li>
</ul> </div> </li> </ul> </div>
and here is the jQuery supposed to be tracking the url:
jQuery(function($) {
var path = window.location.href;
path = path.split("/");
$(".parent-link").each(function() {
if (this.href === path[3]) {
$(this).addClass('active');
}
});
if($('.parent-link').hasClass('active')){
$('.child-links').addClass('active');
}
});
The console is not showing any errors. I can see the active class is not added. The reason I am looking to do this is to allow the children of the parent items to be active as well. I will apply the same principle to the children to track the parent's respective URL. if that makes sense.
Any help or insight would be much appreciated.
i have html code and i need to get value from <h> element that is placed in a <li> element so i tried the following code
<li class="product-price">
<h3> 7 406,10 dollar </h3>
<!-- close price -->
</li>
<script>
function myFunction() {
var x = document.getElementsByClassName("product-price");
alert(x.item(0).innerHTML);
}
</script>
but i am getting [https://i.stack.imgur.com/tCt1X.png]
as long as h3 is without a class or id so u can get it from it's parent using queryselector,
try the snippet =)
window.addEventListener('load', function() {
var txt = document.querySelector('.product-price :nth-child(1)').innerHTML;
console.log(txt);
});
<li class="product-price">
<h3> 7 406,10 dollar </h3>
<!-- close price -->
</li>
<li >
<h3 class="product-price"> 7 406,10 dollar </h3>
</li>
That should do it.
Although you might need to change the class names
This should also work (if you can't change the html):
console.log(x[0].innerHTML);
https://www.w3schools.com/jsref/dom_obj_htmlcollection.asp
Is there any way to do this:
<h1>Topology</h1>
<ul><li> Parent Directory</li>
<li> File1.mp4</li>
<li> File2.mp4</li>
<li> File3.mp4</li>
<li> File4.mp4</li>
<li> File5.mp4</li>
<li> File6.mp4</li>
<li> File7.mp4</li>
<li> File8.mp4</li>
<li> File9.mp4</li>
<li> File10.mp4</li>
</ul>
JSFiddle: https://jsfiddle.net/wagyox71/
Is there any way to do this without listing every single file separately?
You can do this with JavaScript.
Create a div for the list, then use a script and an array to populate the div.
The div: <div id="myLinks"></div>
var links = [' Parent Directory', ' File1.mp4', 'File2.mp4', 'etc'];
var ul = document.createElement('ul');
document.getElementById('myLinks').appendChild(ul);
links.forEach(function(name){
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML += name;
});
You can manually populate the links array, or do it dynamically from a directory on the site via some other call.
I am working on drop down in angular js which is already in ng-repat option.
I want to make it work in a way that when an option is selected in any of repeated select box it should not be available in other repeated select boxes.
My current code looks like this. :
HTML:
<div ng-repeat="endDate in endDate_counts">
<div class="sch_endDate_opsAmount_cell cell1">
<strong class="nc_Camaignfinance_title">Option</strong>
<div class="nc_Camaign_costFinance_opsSlct" select-input>
<div class="nc_Camaign_costFinance_opsSlct_inn">
<span>{{endDate.select_endDate}}</span>
<ul>
<li ng-click="endDate.select_endDate = 'Never'">
<em>Never</em></li>
<li ng-click="endDate.select_endDate = 'Impressions'">
<em>Impressions</em></li>
<li ng-click="endDate.select_endDate = 'Budget'">
<em>Budget</em></li>
<li ng-click="endDate.select_endDate = 'Clicks'">
<em>Clicks</em></li>
<li ng-click="endDate.select_endDate = 'Date'">
<em>Date</em></li>
</ul>
</div>
</div>
</div>
</div>
*Note: Please ignore the custom directives or other methods. I am using them myself and aware of them .
try:
html:
<ul>
<li ng-show="checkExist(key-1,'Never')" ng-click="endDate.select_endDate = 'Never'">
<em>Never</em></li>
<li ng-show="checkExist(key-1,'Impressions')" ng-click="endDate.select_endDate = 'Impressions'">
<em>Impressions</em></li>
<li ng-show="checkExist(key-1,'Budget')" ng-click="endDate.select_endDate = 'Budget'">
<em>Budget</em></li>
<li ng-show="checkExist(key-1,'Clicks')" ng-click="endDate.select_endDate = 'Clicks'">
<em>Clicks</em></li>
<li ng-show="checkExist(key-1,'Date')" ng-click="endDate.select_endDate = 'Date'">
<em>Date</em></li>
add this function in your js file:
$scope.checkExist = function(index,value){
if(index < 0){
return true;
}
if($scope.endDate_counts[index].select_endDate == value){
return false;
}else {
return true;
}
}
This is code of HTML.
This code is working in Mozilla but not working in Chrome.
<!DOCTYPE html>
<html>
<body>
<ul id="myList1">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul id="myList2">
<li>Water</li>
<li>
<input id="files" name="files" type="file" />
</li>
</ul>
<p>Click the button to copy an item from one list to another.</p>
<button onclick="myFunction()">Try it</button>
<p>Try changing the <em>deep</em> parameter to false, and only an empty LI element will be cloned.</p>
<script>
function myFunction()
{
var itm = document.getElementById("myList2").lastChild;
var cln = itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}
</script>
</body>
</html>
Can You Please Precise your Question a bit more clear
lastChild includes all node children, including text-nodes. So what you got was not an element but a text-node with the newline and space between </li> and </ul>.
So what you want is the last child Element, not the last child Node.
Which you can do with
function myFunction()
{
var itm = document.getElementById("myList2").lastElementChild;
var cln = itm.cloneNode(true);
document.getElementById("myList1").appendChild(cln);
}