We Keep Coding

How to get value inside div inside ul inside li with Javascript?

I'm not learning jQuery yet, so javascript please. here is the HTML like below
<ul style="position: absolute;">
<li style="position: absolute;">
<div role="checkbox" class="filter-list-cell filter-text css-ahhuez">
<span class="dog-123" title="dogname">TEDDY</span>
<span>8%</span>
</div>
</li>
<li style="position: absolute;">
<div role="checkbox" class="filter-list-cell filter-text css-voqwhr">
<span class="dog-123" title="dogname">OZZY</span>
<span>7%</span>
</div>
</li>
.
.
.
8 more <li>
</ul>
what i try to get is inside the li > span value "TEDDY" and next li > span "OZZY" and the rest of 8 more li value inside the span, make the result as a array like:
dogname = [TEDDY,OZZY,REX...]
i tried right click to copy selector path then use document.querySelectorAll(), i got 10 NodeList, i Array.from it but i still need to pass the div to get the span value.
i think i should loop through them? but it looks weird to me...
im not really familiar with html so please give me some hint or direction for this problem
Thanks!

Grab the dogs by the dog-123 class name, and then map over the (converted to an array) node list to create a new array of names from each node's text content.
const dogs = document.querySelectorAll('.dog-123');
const names = [...dogs].map(dog => dog.textContent);
console.log(names);
<ul>
<li>
<span class="dog-123">TEDDY</span>
<span>8%</span>
</li>
<li>
<span class="dog-123">OZZY</span>
<span>7%</span>
</li>
<li>
<span class="dog-123">Bob from Accounting</span>
<span>700%</span>
</li>
</ul>
Additional documentation
Spread syntax

You can do it by using CSS selectors: grab the first span inside every div which is inside a li which is inside an ul. The :first-child part is called a pseudo-class, that is, it selects an element with respect not only to itself and its parents / siblings, but against characteristics of the XML tree or even external characteristics such as browser history.
Careful, though, because if you have another ul whose descendants have those characteristics, you would be selecting undesired values.
In one line:
Array.from(document.querySelectorAll("ul > li > div span:first-child")).map(x => x.innerText);
If you wanted to be more precise (in a scraper, for example), you would probably start with a root element with a known id (thence unique). So let's say you have <ul id="myList">, then the CSS selector would be #myList > li > div span:first-child.

How to get li from a href value containing string

I've got the following html
<ul id="navigationMenuTop" class="nav navbar-nav" data-bind="foreach: getRoutes">
<li data-bind="css: ..." >
<a data-bind="attr { href: ...">
This generates a nice top bar menu where users get to go to parts of the program where they have the rights for.
Now I need to get the li where the href in a contains 'registration'
I've tried several things, the latest being
$('.navigationMenuTop li a[href*="registration"]');
but no success yet, any ideas?

I think you are mixing few things here.
This is not a knockout question, more of a jQuery + CSS questions.
navigationMenuTop is ID - so you shouldn't access it with a dot which means class.
Try # instead:
$('#navigationMenuTop li a[href*="registration"]');

You can use the parent function to get the parent of the matched anchor
$('#navigationMenuTop a[href*="registration"]').parent();
you can check this out here

$("#navigationMenuTop").on('click','li',function (){
alert($(this).text());
});

Javascript each() function remove link

I've got a website under prestashop, and my dropdown menu has different categories that are all clickable. I would like to remove the links from the "Marques" and "Les Gammes" categories and leave just the text. I'm using the each() function to select all my categories, but this returns an array within the li and the ul inside the li.
Here is the JSFiddle.
Here is the js code:
$('jms-mega-menu').ready(function () {
// Get each div
$('.notlink').each(function () {
// Get the content
var str = $(this).text();
$(this).html(str);
});
});
And here is a sample of my html code. You can find the full code on the fiddle.
<ul jms-mega-menu>
<div>
...
<ul class="mega-nav level1">
<li class=" haschild group notlink"><a id="item-8" href="#">Marques</a>
<ul>
<li><a id="item-9" href="#">Apple</a></li>
<li><a id="item-10" href="#">Samsung</a></li>
</ul>
</li>
</ul>
<ul>
...

One solution would be use unwrap to remove the a tag from around the text. Note the use of .notlink > a to only affect anchors that are direct children of the .notlink and not the nested lists:
$('.notlink > a').contents().unwrap();
http://jsfiddle.net/orvrj7qs/5/
Another option which may be a bit more extensible would be to use replaceWith, which would allow you to make additional modifications to the text if needed:
$('.notlink > a').replaceWith(function(){
return $(this).text();
});
In this case, we simply replace the anchor with just the text within the anchor.
http://jsfiddle.net/orvrj7qs/6/

Why does Jquery only affect the first div element? [duplicate]

This question already has answers here:
How can I apply a jQuery function to all elements with the same ID?
(4 answers)
Closed 9 years ago.
I am using the "replace" function to remove all non-numeric values in a div.
It seems Jquery replace only affects the first element.
Here is my Jquery:
$('#comment').each(function() {
var thz = $(this);
var repl = thz.html(thz.html().replace(/\D+/g, ''));
});
HTML Code:
<a id="comment1" href="#"> c2fđf011. </a>
<a id="comment1" href="#"> c20ff113. </a>
<a id="comment1" href="#"> c201gf76341. </a>
Result:
2011 c20ff113. c201gf76341.
The result I want is:
2011 20113 20176341

You have duplicate ids, Which is invalid and also jQuery ID selector(or any other id selector like document.getElementById which internally jQuery uses because element with ids are indexed by most browsers and are meant to be unique) will return only the first one that appears in DOM. Change it to class and see it working:
$('.comment').each(function() {
var thz = $(this); var repl =
thz.html(thz.html().replace(/\D+/g, ''));
});
HTML
<a class="comment1" href="#"> c2fđf011. </a>
<a class="comment1" href="#">c20ff113. </a>
<a class="comment1" href="#"> c201gf76341. </a>
By the way had your id been like this:-
<a id="comment1" href="#"> c2fđf011. </a>
<a id="comment2" href="#">c20ff113. </a>
<a id="comment3" href="#"> c201gf76341. </a>
Starts with Attribute selector will help you (But slow you down literally, since this is an attribute selector and lose the advantage of using IDs).
$('[id^=comment]').each(function() { // While using this better give a container context $('[id^=comment]', 'container').each(function...
var thz = $(this);
var repl = thz.html(thz.html().replace(/\D+/g, ''));
});
Demo
Moral: IDs must be unique

ID in a HTML page is supposed to be unique
That is the reason it targets only the first instance of the element found.
Replace the elements with class instead
$('.comment').each(function() {
// Your code
});

$('.comment').each(function() { var thz = $(this); var repl = thz.html(thz.html().replace(/\D+/g, '')); });
replace ur element with id comment to a class comment.
If you use ID several times on elements the selector will only pick the first element with that ID.
But when you use class instead, the selector will pick all the element having that class.

If you really don't want to change the html you can use selector by attribute. But as others suggested, using class instead of id is the best option here.
$('div[id="comment"]').each(function(){})

Jquery Toggle only works on one Post

I'm having an issue with using Jquery toggle on a feed. I have a hyperlink called Tags. When i click on this it toggles a div underneath it.
It works - But only for the top post in the feed - If I have any other posts in the feed it doesn't work.
Below Is Jquery:-
<script type="text/javascript">
$(function () {
$("#hypfeedTagBtn").click(function() {
$("#divPostBodyTags").toggle();
return false;
});
});
</script>
Below is HTML:-
<div id="divPostFoot_64" class="dPostMain dPostFoot">
<span id="Content_ucFeeds_repFeedThread_lblFeedViewCouont_0" class="spFootReplyCount"></span>
<span id="Content_ucFeeds_repFeedThread_lblFeedShareLink_0" class="spFootLinks"></span>
<span id="Content_ucFeeds_repFeedThread_lblFeedDeleteLink_0" class="spFootLinks"></span>
<a id="hypfeedTagBtn" class="spFootLinksShowTags">Tags</a>
<a id="Content_ucFeeds_repFeedThread_hypFeedMessageMe_0" class="spFootLinks" href="/Mail/NewMessage.aspx?FeedID=64">Message Me</a>
</div>
<div id="divPostBodyTags" class="dPostMain dPostTAGSDIV" style="display: block;">
<ul id="PostBodyTags">
<li class="TAGLiItem">
<a class="TAGaItem">Plumbers</a>
</li>
<li class="TAGLiItem">
<a class="TAGaItem">Plumbers</a>
</li>
</ul>
</div>
Thanks
Steve

MDN element.id
The ID must be unique in a document, and is often used to retrieve the
element using document.getElementById.
In some documents (in particular, HTML, XUL, and SVG), the id of an
element can be specified as an attribute on the element like so: .
However you can't use this attribute in a custom XML document without
correctly specifying the type of the id attribute in the DOCTYPE.
Other common usages of id include using the element's ID as a selector
when styling the document with CSS.
Note that IDs are case-sensitive, but you should not create IDs that
differ only in the capitalization (see Case Sensitivity in class and
id Names).
Use a class instead of an id if you want to toggle more than one section.