How to get value inside div inside ul inside li with Javascript? - 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.

Related

How to check for first element in JavaScript that has no style of display none?

I have got a list of li elements as I filter data I exclude the unneeded elements by setting the display to none. I would like to check for the first element that has no style of display set to it how can I do this:
Example of element with display none:
<li style="display: none;">Data</li>
Example of element that has no attribute of display none:
<li style="">Example2</li>
My JavaScript Code:
var liValue = $("#UlId").find('li:not([style*="display: none"])').val();
How can I get the first li that is visible.
If you only want first visible value find and eq(0) is your friend.
var liValue = $("#UlId").find('li:not([style*="display: none"])').eq(0).find('a').text();
console.log(liValue);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="UlId">
<li style="display: none;">Data</li>
<li style="">Example2</li>
<li style="">Example3</li>
</ul>
you can use this
$('li:visible:first')

JQuery - setting an "active" class for image-scroll

I have content loading dynamically (using new WP_query loop in WordPress) for a jQuery carousel or image-scroll function -- where the image-scroll is a li list of images, styled to look like a strip of images.
When the image-scroll works properly, one of the images in the li tag has a class of active, which expands the image and makes it look like it's in front of the other images,
... and as the user clicks through this strip of images, the active class changes/moves to the targeted li tag, expanding that image.
What's happening is that none of the li tags are active when the page loads - since the content is dynamic through the WP loop (I didn't want all of the li tags to start with the active class, so I didn't add it to the loop),
...and so the images are just lined up in a consistent strip w/o one of the images being expanded (or having that active class).
It is only if the user happens to click on one of the images that it expands,
...but i need one of the images to be expanded (to have the class of active) before the user clicks so I need the active class added as/after the page loads.
I have tried through the jQuery code to target one of the li tags to add the active class, using filter() or closest() after the page loads, but that didn't work.
Or maybe I should write a new script to add the active class?
Any help much appreciated!
I have the abbreviated html and the jQuery function below.
_Cindy
ps as the code indicates, I also have corresponding article titles that scroll with the images, so perhaps I need to adjust the jQuery there, too.
<div class="articles-scroll">
<ul class="images-scroll">
<li><!-- I need only one of these tags to have a class of active to start -->
<a href="#">
<span class="set-image-border" style="float: none;">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
<li>
<a href="#">
<span class="set-image-border">
<img class="setborder" src="image-set-by-new-wp_query">
</span>
</a>
</li>
</ul>
<div class="clear-float"></div>
<!-- in this section of html one of the article titles is active to coordinate with the active li image above to produce a corresponding clickable title, this works, but once again, only when user clicks on an image to begin the jQuery image-scroll function -->
<div class="wrapper">
<ul class="images-content">
<li>
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="article-header">
<h2>
<a href="link-set-by-new-wp_query">
</h2>
</div>
</div>
</li>
</ul>
</div>
jQuery(".images-scroll li a").click(function() {
jQuery(this).parent().parent().find("li").removeClass("active");
// tried the following instruction as well as on next line, but no go
// jQuery(this).parent().parent().closest("li").addClass("active");
jQuery(this).parent().addClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").removeClass("active");
jQuery(this).parent().parent().parent().find(".images-content > li").eq(jQuery(this).parent().index()).addClass("active");
var step = ((-250)*(jQuery(this).parent().index()-1))-60;
//alert(step);
jQuery(this).parent().parent().css("margin-left", step+"px");
return false;
});
The reason why the code you wrote didn't work is that you have it inside a click handler, so nothing happens until you click one of the targeted elements. If you want something to happen on page load you can use $(document).ready() (can be shortened as $()) or $(window).load(). Just add the following lines below or above your existing code.
jQuery(function(){
var $listItems = jQuery('.images-scroll li');
$listItems.first().addClass('active');
// Second list item
$listItems.eq(1).addClass('active');
// Third list item
$listItems.eq(2).addClass('active');
});
Also, please note that (unless it conflicts with a different plugin), writing $ is shorter than jQuery, and it should do the same.

How to use CHEERIO.js for this HTML?

<div class="A">
<section class="B" data-vr-zone="B">
<header class="C"> BarFoo</header>
<ul class="list">
<li data-vr-contentbox="">
<a href="http://www.foobar.com/.../html">
<small>BarBar</small>
<span>Foo Bar foobarbar FooFoo?</span>
</a>
</li>
<li data-vr-contentbox="">
<a href="http://www.foofoobar.com/.../html">
<small>BarBarBar</small>
<span>Foo foo FooFoo?</span>
</a>
</li>
I want to access the url in the HREF attribute. And the text in the SPAN -- Of only the first list item.
What I have works but I'm looking to learn a better way.
var url = $('div .A').children().children().children().children()[0].attribs.href;
var title = $('div .A').children().children().children().children()[0].children[2].children[0].data;
You want to use a better selector string to target the element & attribute of interest. Exactly how vague or precise you go involves trade-offs of coupling too tighly to the DOM structure and thus some irrelevant change to the HTML means your selector doesn't match anymore or using too vague a selector and matching more stuff than you intend.
vaguest: 'a' (find every anchor)
'.A a' (every anchor inside the div class="A")
Recommended: '.A li a' (must be part of a list)
crazy specific: 'div.A section.B ul.list li a'
.
var link = $('.A li a');
var href = link.attr('href');
var spanText = link.find('span').first().text();

CSS or jQuery Selector for span within span

I am trying to select a span within a span within a div using plain CSS or JQuery selectors. The html is as follows:
<div id="example2_paginate" class="dataTables_paginate paging_full_numbers">
<span id="example2_first" class="first paginate_button paginate_button_disabled">First</span>
<span id="example2_previous" class="previous paginate_button paginate_button_disabled">Previous</span>
<span>
<span class="paginate_active">1</span>
<span class="paginate_button">2</span>
<span class="paginate_button">3</span>
<span class="paginate_button">4</span>
<span class="paginate_button">5</span>
</span>
<span id="example2_next" class="next paginate_button">Next</span>
<span id="example2_last" class="last paginate_button">Last</span>
</div>
I want to select spans that contain 1 to 5 (paginate_active and the 5 paginate buttons), individually.
With my very limited knowledge of CSS and jQuery I've tried a couple of things but I'm sure my syntax is wrong, like $("paging_full_numbers span:eq(1)") .
Could you please give me a hint of how to go about it?
To select them individually, you can simply select them all and then use jQuerys .each(). For example
spanList = $('#example2_paginate').find('.paginate_active, .paginate_button');
will find all classes of 'paginate_active' or 'paginate_button' that, are inside your element of id=example2_paginate. Then you can write:
spanList.each(function(index){
<-- code here for occurence of index index-->
});
Alternatively to select the i^th button without looping through them all:
spanList.eq(i)
See jsFiddle: http://jsfiddle.net/t4KWr/
This CSS is what you want.
div.paging_full_numbers > span > span.paginate_active, div.paging_full_numbers > span > span.paginate_button
A quick way to get, say, the third of the 5 spans would be:
$(".paging_full_numbers > span > span:nth-child(3)")
its seem that there is a problem with
$("paging_full_numbers span:eq(1)")
You should write like
$("#paging_full_numbers span:eq(1)")
Or if you are using class
$(".paging_full_numbers span:eq(1)")
This select spans that contain 1 to 5 (paginate_active and the 5 paginate buttons), individually:
$("div.paging_full_numbers span:[class='paginate_active'],[class='paginate_button']").each(function(){
//do what you want here
});
That select the span's with only class 'paginate_active' or only class 'paginate_button'

inner span is not getting ref in jQuery.Why?

I have one html structure:
enter code here <ul>
<li><span>aaa</span>
<div>
<ul>
<li><span>bbb</span> </li>
</ul>
</div>
</li>
<li><span>ccc</span>
<div>
<ul>
<li><span>ddd</span> </li>
</ul>
</div>
</li>
</ul>
now what should be the exact code to access
<span>aaa</span>and <span>ccc</span>
but not span with bbb and ddd...I have used $("li span:first-child") and its working fine..is it rite I mean as per standard...bcoz I think it should ref every first child span under any li inside that html file....what should be the exact code?
This maybe because you are nesting li without ol/ul, li should be inside ol/ul not inside another li
Your HTML is not well formed. li elements aren't closed. This could be causing the problem.
So you want all the <span>s which are a direct child of an <li> which has a nested list inside it? Here's my go at it:
$("li:has(ul) > span")
Explanation, step by step:
li // find all <li>s
:has( // which have inside them
ul // a <ul> tag
) // (current context is still at the <li>
> // now find just immediate children (not grandchildren, etc)
span // ..which are spans
The result set should now be a list of <span>s whose parent is an <li> which has a <ul> descendant.
Pay a visit to http://validator.w3.org/. Browsers do amazing things in trying to build a DOM from illegal markup, but the results are often not what you expect and inconsistent across browsers.
Use correct markup — then worry about tools dealing with it in unexpected ways. See GIGO.

Categories