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
Related
Okay .. I want to create a button once it's clicked it allows you to add a photo .. like the input tag of attribute type = "file" .. I've already designed the button shape .. all what is remained is to click on it so a window blows up .. and choose a photo to display in the post box ..
enter image description here
<div class="extras">
<ul class="icons">
<li class="photos">
<i class="fa-solid fa-image">
</i>
</li>
<li class="tag"> <i class="fa-solid fa-user-tag"> </i> </li>
</ul>
<div class="button">
<button>launch</button>
</div>
</div>
here is the element of class photos which I want it to display the window of adding a photo once it's clicked .. exactly like .. just different button style ..
If I understand well, what you have to do is this: first you'll need to add an id to your <li class="photos"> and your <button>launch</button>. And also remove your <i id="up"> component since you'll add it with JavaScript. See the html bellow.
<div class="extras">
<ul class="icons">
<li id="photos-component" class="photos">
<!-- there used to be an <i> tag here! -->
</li>
<li class="tag">
<i class="fa-solid fa-user-tag"> </i>
</li>
</ul>
<div class="button">
<button id="launch-button">launch</button>
</div>
</div>
After adding the ids, you'll need to call a JavaScript file by inserting a <script src="insert-your-file-name.js"></script> at the bottom of your <body>. Probably, you already have done this. If not, do it.
In that file, you'll want to add the following code.
// This constant bellow contains your photos component
const photosComponent = document.getElementById("photos-component");
// This constant bellow contains your launch button
const button = document.getElementById("launch-button");
// This whole chunk of code bellow is a function that will run whenever
// you click the button
button.addEventListener("click", () => {
// Here we create a new empty <input> tag
const fileInput = document.createElement("input");
// Here we add all the attributes for the <input> tag
fileInput.id = "up";
fileInput.type = "file";
fileInput.classList.add("fa-solid fa-image");
// Here we add the input to the photos component
photosComponent.append(fileInput);
// Here we change the style of the button
button.classList.add("insert-button-style");
})
Hopefully it helps. You can always read more about the JavaScript HTML DOM (Document Object Model) by googleing it.
These links might help you in your search:
https://www.w3schools.com/js/js_htmldom.asp
https://www.javascripttutorial.net/javascript-dom/
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>
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 am trying to output the link in list "li" from json data and pass it to jquery mobile elements. But the link on "li" seem output like regular link (link with blue color instead of properly listview jquery mobile) after I append with jquery, and did not show attribute css for jquery mobile.
Don't know if I explain it correctly, but what am I doing wrong here??
<?php include "_header.php" ?>
<div data-role="header" data-theme="c">
<div align="center">
//some code
</div>
</div><!-- /header -->
<div data-role="content">
<div align="center"><img src="imgs/charmchasers-m.png" alt="Charmchasers logo" width="250px" ></div>
<div class="content-primary">
<ul data-role="listview" data-inset="true" data-theme="e">
<li>
<h3>North America</h3>
<p>H-D Dealer Charms - USA & Canada.</p>
<ul data-role="listview" data-filter="true" data-theme="c" data-inset="true" id="state-list">
</ul>
</li>
<li>
<a href="display.php?state=international" data-transition="slide">
<h3>International</h3>
<p>H-D Dealer Charms - Asia & Europe.</p>
</a>
</li>
<li>
//some code
</li>
<li>
//some code
</li>
</ul>
</div>
</div><!-- /content -->
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>New Charms</li>
<li>//some code</li>
</ul>
</div><!-- /navbar -->
<script>
(function() {
var json_url = 'http://localhost:8888/MOD/charmchasers/app/mysql-to-json.php';
$.getJSON(json_url, function(data){
$.each(data, function(i, item) {
$('#state-list').append('<li>' + see_abbrv(item.d_state) + '</li>');
});
});
}) ();
</script>
Any idea??
Every time new content is added jQuery Mobile needs to be forced to enhance page markup. It can be done in numerous ways, and if you want to find out more take a look at this ARTICLE, to be more transparent it is my personal blog. Or take a look HERE.
This function should be used:
$('#state-list').listview('refresh');
And code needs to be changed like this:
(function() {
var json_url = 'http://localhost:8888/MOD/charmchasers/app/mysql-to-json.php';
$.getJSON(json_url, function(data){
$.each(data, function(i, item) {
$('#state-list').append('<li>' + see_abbrv(item.d_state) + '</li>');
});
$('#state-list').listview('refresh');
});
}) ();
One more thing to remember, this line must be used inside a $.getJSON but after $.each loop finishes with content appending. In the end one last thing to remember, if possible classic jQuery DOM ready functions should not be used with jQuery Mobile, page events should be used instead, find more about it HERE.
"if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup." - http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
So after appending the new list items you have to trigger the create event to build the listview. try:
$('ul').listview('refresh');
or
$('ul').trigger('create');
EDIT:
try this inside the $.each() loop:
$('#state-list').append('<li>' + see_abbrv(item.d_state) + '</li>').listview('refresh');
I just added .listview('refresh'); at the end of each append. If the list view is already initialized it should work.
I am supposed to find a class and apply a logic for that.
My code structure is as follows.
<div class="class">
<form>
<ul>
<li>xxx</li><li>xxx</li>
</ul>
<ul>
<li>xxx</li><li>xxx</li>
</ul>
<ul class="ul_class">
<li>
<input ....><a ...><span ..></span>
<a href="#" title="View History" class="hstry">
<span class="hide"> </span></a>
</li>
<li>xxx</li>
</ul>
</form>
How to find the class hstry inside the ul with the class named ul_class.
Just use a normal CSS selector to find nested classes like the following:
$( 'ul.ul_class .hstry' )
Note the whitespace between both classes. Without it, it would match an element having both classes, instead of an element with class hstry which is below some <ul> element with class ul_class.
If you want the content, try
var hstry = $('body').find('.hstry').html();
Then you can operate with this variable any way you want.
Using jquery:
$("ul.ul_class").find(".hstr");
$('ul.ul_class .hstry').html(); //for html content
$('ul.ul_class .hstry').text(); //for text data