We Keep Coding

extracting two text value from html elements with cheerio [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Using cheerio, $ is defined as cheerio object, I am trying to get two text (Current price and Original Price) from some elements which have only class no id defined in a html. Any clue how to achieve this ?
Here is the snippet of the html content which hold this two values,
<div class="buy-box__element">
<div class="clp-component-render">
<div class="clp-component-render">
<div class="ud-component--course-landing-page-udlite--price-text" ng-non-bindable="">
<div>
<div class="price-text--container--Ws-fP udlite-clp-price-text" data-purpose="price-text-container">
<div class="price-text--price-part--Tu6MH udlite-clp-discount-price udlite-heading-xl" data-purpose="course-price-text"><span class="udlite-sr-only">Current price</span><span><span>₹700</span></span></div>
<div class="price-text--price-part--Tu6MH price-text--original-price--2e-F5 udlite-clp-list-price udlite-text-sm" data-purpose="original-price-container">
<div data-purpose="course-old-price-text"><span class="udlite-sr-only">Original Price</span><span><s><span>₹1,280</span></s></span></div>
</div>
<div class="price-text--price-part--Tu6MH udlite-clp-percent-discount udlite-text-sm" data-purpose="discount-percentage"><span class="udlite-sr-only">Discount</span><span>45% off</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
With X-path it is working,but I want to achieve this with cheerio. also tried with following
#(".price-text--price-part--Tu6MH udlite-clp-discount-price udlite-heading-xl udlite-sr-only")[0].innerText
#(".price-text--price-part--Tu6MH udlite-clp-discount-price udlite-heading-xl udlite-sr-only")

You can do something like:
$('span:contains("Current price") + span span').text()

Could you please try this?
the html should be the inner html, you can use puppeteer like libraries.Something like let html = await page.evaluate(() => document.body.innerHTML);
$('span:contains("Current price")', html).each(function() {
let CurrentPrice1 = $(this).next().text();
let CurrentPrice2 = Number(CurrentPrice1.replace(/[^0-9.-]+/g,""));
console.log(CurrentPrice1); //this with symbol
console.log(CurrentPrice2); //this for only fetching the numeric value
});
for Original price replace Current price with Original Price

How would I change the contents of an HTML class using JavaScript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I'm working on a grade holder project and I have an html class that holds one of the grades.
<span class="tooltip">
<span class="grade">83.49%</span>
</span>
I wanted to know how I could use JavaScript to turn the 83.49 into a 90.
I tried using the getElementsByClass but I wasn't actually sure of how to go about setting it up. All I need to do is change the specific grade.

if you have used grade class only at this place you can use this solution :-
document.getElementsByClassName("grade")[0].innerText = "90";

Use querySelector():
document.querySelector(".tooltip .grade").innerText = "90%";
<span class="tooltip">
<span class="grade">83.49%</span>
</span>

document.getElementsByClassName('grade')[0].innerText = '90%';
Note: getElementsByClassName returns array-like collection of elements.

Try with Math.ceil()(is round the number to higher value) .Use this (num/10)*10 formula to convert the number round of 10
First replace the % value form text.
Then parse the string to number using parseFloat()
Then apply above formula
var elem = document.querySelectorAll('.grade');
Array.from(elem,(a,b)=>{
var str = a.textContent.replace('%', '').trim();
a.textContent = Math.ceil(parseFloat(str) / 10) * 10+'%';
})
<span class="tooltip">
<span class="grade">83.49%</span>
<span class="grade">83.49%</span>
<span class="grade">43.49%</span>
</span>

You can also use separate ids for elements to call them by id as follows;
function cha()
{
ele=document.getElementById("grade");
ele.innerHTML="90%";
}
<span class="tooltip">
<span id="grade">83.49%</span>
</span>
<button onclick="cha()">Change</button>
Edit: If you still want to use classes then you can use 0th index of class array you got by using getElementsByClassName follows;
function cha()
{
ele=document.getElementsByClassName("grade");
ele[0].innerHTML="90%";
}
<span class="tooltip">
<span class="grade">83.49%</span>
</span>
<button onclick="cha()">Change</button>

Clone a div with jQuery Clone function [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am trying to clone a div without its value. Everything I've tried so far copies the value as well.
Here is my jQuery function
$('#add_more').click(function(){
$('#div_to_clone).clone().insertBefore('#add_more').find('input').val('');
});

This seems to be working fine for me:
$('#add_more').click(function() {
$('#div_to_clone').clone().insertBefore('#add_more').find('input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div_to_clone">
<input type="text" />
</div>
Add more
Well, I recommend you changing your id to a class since the value of id attribute should be unique throughout the page. You might be getting the issue in some browser due to duplicate id.
$('#add_more').click(function() {
$('.div_to_clone:first').clone().insertBefore('#add_more').find('input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div_to_clone">
<input type="text" />
</div>
Add more

Assuming that your html code is similar to this.
<div class="ContainerDiv">
<div id=ClonethisDiv><input class="InputTxtBox" type="text" /></div>
</div>
clone
Now,
$("body").on("click", "a", function() {
$("#ClonethisDiv").clone().appendTo(".ContainerDiv").find(".InputTxtBox").val("");
});
Hence on click, anchor tag u will able to get a copy of Div with Id='ClonethisDiv' and appended to the container Div.
Here while cloning(copy) input element with a class '.InputTxtBox', will be emptied and get copied. No worry! TextBox Values which already appended to container Div doesnot change.
Hope this will help you.

insert text into span class using jquery [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I have following html structure
<a id="myBtn" class="ui-link">
<span class="number"> </span>
<span class="button "> </span>
</a>
I want dynamically to insert some content into <span class="number">
var content = 99;
$('number').html(content);
but nothing change.
So what I need to do insert value into span that resulted node looks like this
<span class="number">99</span>

You are not using . to get class selector. Use $('.number') instead of $('number')
$('.number').html(content);
OR
$('.number').text(content);

insert text using class
var content = 99;
$('.number').html(content);

Try this:
$('.number').html(content);
You are referring to a wrong element. You can also do this:
$('.number').text(content);

How to get the value of a dropdown using jquery? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have a dropdown menu and a link in a table. What I want is to get the value of the dropdown menu that is being retrieve in a row.
<td><?php echo form_dropdown('status',array('Fine' => 'Fine', 'Disposable' => 'Disposable'),'','class="status" id="status"'); ?></td>
<td align="center">
<i class="icon-edit icon-large"></i>
<div id="return" style="float: left;">
<!--when this one is clicked I can get the value of the dropdown-->
<i class="icon-backward icon-large"></i>
</div>
How can I get the value of the dropdown When the link with the class of return is clicked? I've tried .closest() function but it returned undefined. Thanks!

Did you tried?
$(document).on('click', 'a.return', function() {
alert($(this).closest('tr').find('#status').val());
});
Note: Using elements with the same id is a bad practice and can give you problems along the road. Please consider to remove #status id from the elements and use a class when selecting the element.
Try this instead:
$(document).on('click', 'a.return', function() {
alert($(this).closest('tr').find('select.status').val());
});

Use :
$(".return").click(function({
selectedValue = $('select[name="status"]').val(); //using name tag
selectedValue = $('.status').val(); // using Class
selectedValue = $('#status').val(); // using Id
console.log(selectedValue);
}));