We Keep Coding

How to get the first class from two same classes with cheerio

currently i'm making a web scraper with node.Js using cheerio. i want to get the data inside the first of class="panel-items-list.
the html look like this
<div class="margin-bottom-=30">
<div class="side-list-panel">
<ul class="panel-item-list">...</ul>
</div>
</div>
<div class="margin-bottom-=30">
<div class="side-list-panel">
<ul class="panel-item-list">...</ul>
</div>
</div>
i already did like this
const relateArticle = $('.panel-items-list').map((i, section)=>{
let articles = $(section).find('h5');
return articles.text();
}).get();
but it return the data from both class="panel-items-list". how do i get data just from one class ? sorry my english is bad. thanks in advance !

To get the first class only from the .panel-item-list use .get(0) that means you are only selecting the first index found using .map
Also, in your current code jQuery your are not selecting the right class selector.
In addition use .trim() method when getting the text to clean up any unseen spaces within the text.
Live Working Demo:
const relateArticle = $('.panel-item-list').map((i, section) => {
let articles = $(section).find('h5');
return articles.text().trim();
}).get(0)
console.log(relateArticle) //Foo
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="margin-bottom-=30">
<div class="side-list-panel">
<ul class="panel-item-list">
<h5>
Foo
</h5>
</ul>
</div>
</div>
<div class="margin-bottom-=30">
<div class="side-list-panel">
<ul class="panel-item-list">
<h5>
Bar
</h5>
</ul>
</div>
</div>

Use first():
$('.panel-items-list').first().find('h5').text()

How can I use jQuery to make an element's content the same as another?

I have a site with a drop-down menu and I want the titles in it to be the same as the content in an h1 tag on another part of my site
This is my jQuery -
const johnName = $("#john").siblings("span");
const johnNameMenu = $(".john").children("h1").val();
johnName.html(johnNameMenu);
This is the code on my site which I want to appear in the menu -
<section class="john">
<div class="team-header" id="john">
<div class="teamlogo">
<img src="images/logos/lazio.png" />
<h1>John's Team</h1>
</div>
</div>
<div class="john-roster team-rosters">
<?php include ('john.php'); ?>
</div>
</section>
This is the code in the dropdown menu -
<a href="#john" id="john-link" class="anchor">
<span></span></a>
I want the "John's Team" to appear in the drop-down menu.
What is wrong with my jQuery code?

For getting the text of an element you use the function text(); val() is for <input> elements.
Note: even though I left the HTML as-is, id should be unique in a page. You should be using class if you want to have multiple of those <a> tags in there.
Your selectors and use of .children were not right. If you still want to use .children the line would be $('.john').children().find('span').
I'd recommend using more specific selectors than using .john (children far down in hierarchy).
const johnName = $(".john span");
const johnNameMenu = $(".john h1").text();
console.log(johnNameMenu)
johnName.each(function(){
$(this).html(johnNameMenu);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This is the code on my site which I want to appear in the menu -
<section class="john">
<div class="team-header" id="john">
<div class="teamlogo">
<img src="images/logos/lazio.png" />
<h1>John's Team</h1>
</div>
</div>
<div class="john-roster team-rosters">
<a href="#john" id="john-link" class="anchor">
<span></span></a>
<a href="#john" id="john-link" class="anchor">
<span></span></a>
</div>
</section>

try this
const johnName = $("#john").closest("selection").find("span");
const johnNameMenu = $(".john").children("h1").val();
johnName.html(johnNameMenu);

How to scrape data from following html using querySelector or jQuery

I want to get text from this html using querySelector or jQuery.
<td>
<a href="#" class="verify-address pull-right">
Verify Address
</a>
<div class="verify-address-address-content">
Tom Heilig<br>
8642 PEPPER LN<br>
</div>
MECHANICSVILLE, VA 22221-4943 US
<br>
+1 412-111-1111<br>
<div class="text-success" style="white-space:normal">
<span>Address Verified</span>
</div>
</td>
OUTPUT should be like
Tom Heilig
8642 PEPPER LN
MECHANICSVILLE, VA 22221-4943 US
+1 412-111-1111
Can any one please help me out in this?

Let's say td's inner content is wrapped inside a div with id datarow like that:
<td>
<div id="datarow">
...
</div>
</td>
Then this Jquery code will work like charm:
alert(
$("#datarow").clone() // Clone the content
.find('span').remove() // Remove all span tags
.end() // Return to the clone
.text() // Only text
)

Copy HTML from element, replace text with jQuery, then append to element

I am trying to create portlets on my website which are generated when a user inputs a number and clicks a button.
I have the HTML in a script tag (that way it's invisible). I am able to clone the HTML contents of the script tag and append it to the necessary element without issue. My problem is, I cannot seem to modify the text inside the template before appending it.
This is a super simplified version of what I'd like to do. I'm just trying to get parts of it working properly before building it up more.
Here is the script tag with the template:
var p = $("#tpl_dashboard_portlet").html();
var h = document.createElement('div');
$(h).html(p);
$(h).find('div.m-portlet').data('s', s);
$(h).find('[data-key="number"]').val(s);
$(h).find('[data-key="name"]').val("TEST");
console.log(h);
console.log($(h).html());
console.log(s);
$("div.m-content").append($(h).html());
<script id="tpl_dashboard_portlet" type="text/html">
<!--begin::Portlet-->
<div class="m-portlet">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
<span data-key="number"></span> [<span data-key="name"></span>]
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet_nav">
<li class="m-portlet__nav-item">
<i class="la la-close"></i>
</li>
</ul>
</div>
</div>
<!--begin::Form-->
<div class="m-portlet__body">
Found! <span data-key="number"></span> [<span data-key="name"></span>]
</div>
</div>
<!--end::Portlet-->
</script>
I'm not sure what I'm doing wrong here. I've tried using .each as well with no luck. Both leave the value of the span tags empty.
(I've removed some of the script, but the variable s does have a value on it)

You have two issues here. Firstly, every time you call $(h) you're creating a new jQuery object from the original template HTML. As such any and all previous changes you made are lost. You need to create the jQuery object from the template HTML once, then make all changes to that object.
Secondly, the span elements you select by data-key attribute do not have value properties to change, you instead need to set their text(). Try this:
var s = 'foo';
var p = $("#tpl_dashboard_portlet").html();
var $h = $('<div />');
$h.html(p);
$h.find('div.m-portlet').data('s', s);
$h.find('[data-key="number"]').text(s);
$h.find('[data-key="name"]').text("TEST");
$("div.m-content").append($h.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="tpl_dashboard_portlet" type="text/html">
<div class="m-portlet">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
<span data-key="number"></span> [<span data-key="name"></span>]
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet_nav">
<li class="m-portlet__nav-item">
<i class="la la-close"></i>
</li>
</ul>
</div>
</div>
<div class="m-portlet__body">
Found! <span data-key="number"></span> [<span data-key="name"></span>]
</div>
</div>
</script>
<div class="m-content"></div>

In my case only this is working:
var template = $('template').clone(true, true); // Copies all data and events
var $h = $('<div />');
$h.html(template);
$h.find('.input-name').attr('value', "your value here"); // Note: .val("your value here") is not working
$('.list').prepend($h.html());

Javascript Selecting child element not working

i m working on adding a FB share button to all my posts.
so i wanted to use the sharer.php? method with all the parameter retrieved from the post.
So my blog structure
<div id='postwrapper'>
<div id='title'>
hello</a>
</div>
<div id='da'>
<span>Posted on </span>
<span class='divider'></span>
<span>By</span>
</div>
<div class='post_content'>$row['post'] gud day</div>
<div id='post_footer'>
<a href=viewpost.php>Continue reading</a>
<a href='#' onClick='fbshare(this)'>Insert text or an image here.</a>
</div>
</div>
My javascript for fbshare function (not complete).
function fbshare(fb) {
var p1 = fb.parentNode;
var p2 = p1.parentNode;
var title = p2.getElementById("title").innerHTML;
alert(title);
}
Everytime i try this it says undefined is not a function

getElementById is a function of the document. Assuming you have more than one post on the page (ids must by unique), try using a class instead:
<div class='title'>
And using getElementsByClassName:
var title = p2.getElementsByClassName("title")[0].innerHTML;
http://jsfiddle.net/AJ9uj/