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
Related
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 3 days ago.
Improve this question
I am using chrome devtools to inspect html. I have this code where I apply querySelector for inner elements:
var x = document.querySelectorAll(".search__results-list li");
var myarray = []
for (var i=0; i<x.length; i++){
const href = x[i].querySelector('.ahchor[href]');
const text = x[i].querySelector('.text-field');
myarray.push([href, text]);
};
The querySelector does not exists on x[i], getting an error Uncaught TypeError: [...].querySelector is not a function how to fix that?
here is the html sample, in reality there is a lot of li's wthin:
<ul class="search__results-list">
<li class="search__result-container">
<div class="search-result">
<div class="search-result__item">
<div class="search-result_block">
<div class="center">
<a class="ahchor" href="somesite.com/a">
<div>
<div class="wrapper">
<div class="entity">
<div class="text-field">content here</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
In your code syntax errors
Should be:
var x = document.querySelectorAll(".search__results-list li");
var myarray = []
for (var i = 0; i < x.length; i++) {
const href = x[i].querySelector('.ahchor[href]');
const text = x[i].querySelector('.text-field');
myarray.push([href, text]);
};
This code should work if you wrote classes correctly and accordingly to your html
You can check this code even in console there, works fine. But I didn't find wrappers with 2 elements and use .m6 twice
enter image description here
I used the Chrome development tool to achieve this. I found that according to your code, you can achieve logic without error. You can run the code several times.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I have a html like the below,
<div id ="b1">
<div class = "test1" value = 100> </div>
</div>
I need the Value 100 to be displayed in the HTML inside the particular div.
I used the below JS code,
Var target = document.getElementById('b1');
var test = target.getElementsByClassName('test');
$(test).innerHTML = $(this).attr('value');
It didnt work.
Could someone please help?
Many thanks.
The value attribute isn't available on a <div>
Use .innerHTML to change the value of the div
HTML/Javascript change div content
Also, you can use getElementsByClassName on the document itself, no need to get the parent <div> first
Since you're only expecting 1 result, well need to select the first index of the nodelist returned by getElementsByClassName
Javascript: How to get only one element by class name?
var test = document.getElementsByClassName('test1')[0];
test.innerHTML = 100;
<div id="b1">
<div class="test1"></div>
</div>
var test= document.getElementById('b2');
test.innerHTML=test.getAttribute("value")
<div id ="b1">
<div class = "test1" id ="b2" value="100" > </div>
</div>
You have entered the wrong className, and you cannot use this because it refers to the parent object in this case (window object)
you also cannot add a data attribute to a div, you can use a special dataset attribute data-value:
<div id="b1">
<div class="test1" data-value="100"> </div>
</div>
var target = document.getElementById('b1');
var test = target.getElementsByClassName('test1')[0];
test.innerHTML = test.dataset.value;
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 5 years ago.
Improve this question
I'd like to get all a Elements which got contain the classes menu-item-link and mk-image-link. Is the following expression right?
a[class*="menu-item-link"], a[class*="mk-image-link"]
Didn't get anything selected so I guess not :)
Thanks for the help.
Best regards,
Anton
You have to do this 'a.menu-item-link, a.mk-image-link' it will check if a has this class.
const selected = document.querySelectorAll('a.menu-item-link, a.mk-image-link')
const selected2 = document.querySelectorAll('a.menu-item-link.js-smooth-scroll, a.mk-image-link.js-smooth-scroll')
console.log(selected)
console.log(selected2)
<div class="menu-item-link"><div>
<div><div>
<a class="menu-item-link"></a>
<a class="mk-image-link"></a>
<a class="mk-image-link menu-item-link"></a>
<a class="menu-item-link js-smooth-scroll" href="/superfood-rezepte/">SUPERFOOD REZEPTE</a> <a href="...." target="_self" class="mk-image-link">
document.querySelectorAll allows grouping of selectors.
Note that, it would select all elements which has the specified class names, so a wild-card is not needed. i.e. if you are aiming at menu-item-link and mk-image-link the below should work for you.
So, you could try the below:
var elements = document.querySelectorAll("a[class~='menu-item-link'], a[class~='mk-image-link']"); // OR
elements = document.querySelectorAll("a.menu-item-link, a.mk-image-link"); // Would both selects the same
elements.forEach(function(element, index, array) {
element.style.backgroundColor = "#999";
});
<a class="js menu-item-link js-smooth-scroll" href="/superfood-rezepte/">SUPERFOOD REZEPTE</a> <br>
<a class="js menu-item-link js-smooth-scroll-a" href="/superfood-rezepte/">SUPERFOOD </a> <br>
<br>
Something
<br>
Another Something
<br>
Another Something
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.
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);
}));