I want to extract the text values out of this List:
<ul class="standardSuggestions">
<li class="">
<div id="idac">
<span class="email" id="idb7"><span>mail-fuer-chrisko</span>#<span>web.de</span></span>
<span class="btn-positioner"><span class="btn-wrapper btn-fix btn-service btn-xs"><input name="wishnamePanel:suggestionsContainerWrapper:freeMailSuggestionsPanel:standard-suggestion-list:suggestionRepeaterContainer:suggestion-to-repeat:1:suggestion:subForm:select-email" id="idae" value="Übernehmen" type="submit"></span></span>
</div>
</li><li class="">
<div id="idaf">
<span class="email" id="idb8"><span>post-fuer-chrisko</span>#<span>web.de</span></span>
<span class="btn-positioner"><span class="btn-wrapper btn-fix btn-service btn-xs"><input name="wishnamePanel:suggestionsContainerWrapper:freeMailSuggestionsPanel:standard-suggestion-list:suggestionRepeaterContainer:suggestion-to-repeat:2:suggestion:subForm:select-email" id="idb0" value="Übernehmen" type="submit"></span></span>
</div>
</li><li class="">
<div id="idb1">
<span class="email" id="idb9"><span>chrisko1</span>#<span>web.de</span></span>
<span class="btn-positioner"><span class="btn-wrapper btn-fix btn-service btn-xs"><input name="wishnamePanel:suggestionsContainerWrapper:freeMailSuggestionsPanel:standard-suggestion-list:suggestionRepeaterContainer:suggestion-to-repeat:3:suggestion:subForm:select-email" id="idb2" value="Übernehmen" type="submit"></span></span>
</div>
</li><li class="">
<div id="idb3">
<span class="email" id="idba"><span>chrisko.1</span>#<span>web.de</span></span>
<span class="btn-positioner"><span class="btn-wrapper btn-fix btn-service btn-xs"><input name="wishnamePanel:suggestionsContainerWrapper:freeMailSuggestionsPanel:standard-suggestion-list:suggestionRepeaterContainer:suggestion-to-repeat:4:suggestion:subForm:select-email" id="idb4" value="Übernehmen" type="submit"></span></span>
</div>
</li>
</ul>
Problem is that the div id = "" is changing on every reload. So I'm not sure how to select correct elements. I tried it with the following function:
casper.then(function(){
var listItems = this.evaluate(function () {
var nodes = document.querySelectorAll('ul > li');
return [].map.call(nodes, function(node) {
return {
text: node.querySelector("span").textContent
};
});
});
this.echo(JSON.stringify(listItems, undefined, 4));
});
echo is "null" :-(
Your iteration over the elements is correct. The only way to get a null value out of the page context is if there was an error. The only part of the code that can produce an error is node.querySelector("span").textContent, because a node doesn't necessarily have to have a <span> descendant. If it doesn't have one, then this fails with a TypeError and you get null.
The limited markup that you've shown always contains a <span> in every <li>, so there must be another <ul> on the page, that has no <span> descendants. You have to find a CSS selector with doesn't include the other <ul> element.
I propose
var nodes = document.querySelectorAll('ul.standardSuggestions > li');
Related
I want to copy values from the elements declared in jsp and spray them on the screen.
sampe.html
<div class="island_a">
<div class="island_b">
<ul class="island_c">
<li class="aaaaaa">
<span class="fitCenter">
<p class="city">[seoul shop]</p>
<p class="store">a_center</p>
</span>
</li>
<li class=bbbbbb">
<span class="fitCenter">
<p class="city">[incheon]</p>
<p class="store">b_center</p>
</span>
</li>
<li class="cccccc">
<span class="fitCenter">
<p class="city">[china]</p>
<p class="store">c_center</p>
</span>
</li>
<li class="dddddd">
<span class="fitCenter">
<p class="city">[USA]</p>
<p class="store">d_center</p>
</span>
</li>
The sample.html is written like the code above.
I want is to copy aaaaaa, bbbbbb, cccccc, dddddddd from li class and show them on the screen.
I tried code 1
var listElements = $(".island_a .island_b .island_c .aaaaaa").clone().wrapAll('<li>');
var listElements = $(".island_a .island_b .island_c .bbbbbb").clone().wrapAll('<li>');
var itemHTML = listElements.parent().html();
$(".island_a .island_b .island_c").html(itemHTML);
Only aaaaaa values of the li class are imported into the screen.
I tried code 2
var itemList = [];
var $listElements1 = $(".fitWhereWrap .fitWhere .aaaaaa").clone().wrapAll('<li>').push();
var $listElements2 = $(".fitWhereWrap .fitWhere .bbbbbb").clone().wrapAll('<li>').push();
$(".fitWhereWrap .fitWhere").html(itemList);
The above code does not work.
Please save me.
Please help me
$(() => {
$('.fitCenter').each((index, item) => {
$('body').append(item);
})
});
So I have ul's on my webpage similar to the one below and I'm trying to loop through each of them to grab a span within the li. Below is an example of how it appears in my HTML:
<ul id="item-NineAM" class="list-group">
<li class="list-group-item w-100 border-dark past">
<span class="badge badge-dark" id="item-time">09:15 AM</span>
<p class="m-1 w-75 item-text">fsda</p>
<button class="btn btn-danger" id="trashCan"><span class="oi oi-trash"></span></button></li>
</ul>
I've set up an interval to grab the span with id #item-time and pass it into my audit function
const listGroup = $(".card .list-group li #item-time");
$.each(listGroup, function(i, itemSpan){
console.log(itemSpan)
auditItem(itemSpan)
})
I've verified in the console that the span is passed into function but I cannot seem to grab the text of it.
<span class="badge badge-dark" id="item-time">09:15 AM</span>
I need to grab the time that's inside of the span. My console tells me it's an object. Any ideas? I've tried .text() and .innerHTML but no luck.
Thanks!
The jquery selector you're assigning to listGroup should be pretty general, so you wouldn't include an id as you'd only get one match.
It looks like you're misusing id. Remember, you can only have a single instance of id and it should only be used to indicate uniqueness. Instead you want item-time to be a class since you can have several instances of classes.
I've corrected some others in your html as well.
const listGroup = $(".list-group li span.item-time");
$.each(listGroup, function(){
console.log($(this).text())
//auditItem(itemSpan)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-group item-NineAM">
<li class="list-group-item w-100 border-dark past">
<span class="badge badge-dark item-time">09:15 AM</span>
<p class="m-1 w-75 item-text">fsda</p>
<button class="btn btn-danger trashCan">
<span class="oi oi-trash"></span>
</button>
</li>
</ul>
I am trying to do this:
Search for all the spans in my structure
Get the id value from each span
Update the parent with that text for test purposes
The reason for this work is that I am doing front-end customizations for an application and trying get some WAI-ARIA labelled-by values set on a parent element.
The problem is that many of the needed values come from an COTS application that I am working with/around. These needed input are not always set in a good sequence in the DOM.
I have been looking at a JS solution to get around this.
<div class="fluid-form-container">
<ul id="accordionGroup" class="Accordion" data-allow-multiple="">
<li class="fluid-form-group-container">
<h3 aria-labelledby="accordion1id">
<button aria-expanded="true" class="Accordion-trigger" aria-controls="sect1" id="accordion1id">
<span class="Accordion-title"><div class="fluid-form-title">
<div class="FormSection">
<span id="More_Info_Form_Section_Label">More Info</span>
</div>
</div>
</span>
</button>
</h3>
</li>
<li class="fluid-form-group-container">
<h3 aria-labelledby="accordion2id">
<button aria-expanded="true" class="Accordion-trigger" aria-controls="sect2" id="accordion2id">
<span class="Accordion-title"><div class="fluid-form-title">
<div class="FormSection">
<span id="Even_More_Info_Form_Section_Label">Even More Info</span>
</div>
</div>
</span>
</button>
</h3>
</li>
</div>
//My bad javaScript so far
var found_elements = [];
var outers = document.querySelectorAll('.FormSection');
for(var i=0; i<outers.length; i++) {
var elements_in_outer = outers[i].querySelectorAll("span");
var updateValue = elements_in_outer.getAttr("id");
outers[i].closest("h3").innerHTML = updateValue;
}
The expect results:
- parent tag innerHTML set to the id value of each span in the structure
Actual results:
- I'm getting errors because I am not sure what I need to use to get that id from each span found
querySelectorAll() returns a NodeList , so elements_in_outer.getAttr("id") won't work and should be replaced with querySelector()
there is no getAttr, use getAttribute
( i replaced your for with a forEach )
var found_elements = [];
var outers = document.querySelectorAll('.FormSection').forEach(div => {
var elements_in_outer = div.querySelector("span");
var updateValue = elements_in_outer.getAttribute("id");
div.closest("h3").innerHTML = updateValue;
});
<div class="fluid-form-container">
<ul id="accordionGroup" class="Accordion" data-allow-multiple="">
<li class="fluid-form-group-container">
<h3 aria-labelledby="accordion1id">
<button aria-expanded="true" class="Accordion-trigger" aria-controls="sect1" id="accordion1id">
<span class="Accordion-title"><div class="fluid-form-title">
<div class="FormSection">
<span id="More_Info_Form_Section_Label">More Info</span>
</div>
</div>
</span>
</button>
</h3>
</li>
<li class="fluid-form-group-container">
<h3 aria-labelledby="accordion2id">
<button aria-expanded="true" class="Accordion-trigger" aria-controls="sect2" id="accordion2id">
<span class="Accordion-title"><div class="fluid-form-title">
<div class="FormSection">
<span id="Even_More_Info_Form_Section_Label">Even More Info</span>
</div>
</div>
</span>
</button>
</h3>
</li>
</div>
If you know beforehand that you will only use the span elements that have an id, then use [id] in the querySelectorAll selector likewise
document.querySelectorAll('span[id]')
If you will use that as an array, then you need
[... document.querySelectorAll('span[id]')]
Assigning the new value would be something like this:
[... document.querySelectorAll('span[id]')].forEach(s => s.closest("h3").innerHTML = s.id)
i have html div where i use ng-repeat that gives me back elements from array
<div>
<div class="col-sm-3" ng-repeat="el in vm.filmovi " id="filmovi">
<img src="http://image.tmdb.org/t/p/w500/{{el.poster_path}}" style="width:100%;"><br>
<a ng-click="vm.set_favorit(el)" style="cursor:hand; color:white;" uib-tooltip="Postavi u omiljene">
<i class="glyphicon" ng-class="{'glyphicon-star-empty':el.favorit!=true, 'glyphicon-star':el.favorit==true}"
aria-hidden="true"></i></a>
<a href="http://www.imdb.com/title/{{el.imdb_id}}/" style="color:white;">
<strong>{{ el.title | limitTo: 20 }}{{el.title.length > 20 ? '...' : ''}}</strong></a>
<a class="glyphicon glyphicon-share-alt" style="margin-left:5px; color:white;" ng-click="vm.open()" uib-tooltip="share" ></a><br>
{{el.popularity}} <br>
<a style="color:white;" href="#" ng-click="vm.filter(genre)" ng-repeat="genre in el.genres"><small>{{genre.name}} </small></a>
<div ng-init="x = 0">
<span uib-rating ng-model="x" max="5"
state-on="'glyphicon-star'"
state-off="'glyphicon-star-empty'"></span></div>
</div>
</div>
now i created a button that changes value of id "filmovi"
<li><a href="#" ng-hide="vm.ulogovan" ng-click="vm.dugme();" >losta</a></li>
and created function vm.dugme() that gets element by id and sets class atribute to col-sm-4
vm.dugme=function(){
document.getElementById("filmovi").setAttribute("class","col-sm-4");
};
but when i did that only the first element changed
but i need for all of them to change to col-sm-4 , any suggestion?
Don't do DOM manipulation from angularjs controller. Instead make use of directive provided by angular.
You could use ng-class with expression so that whenever expression gets satiesfied the class will be added over that DOM. To add class put addColSm4 flag inside a controller and change that flag from dugme method of your controller. Also by looking at screenshot it seems like you need col-sm-3 class at the beginning, afterwards you need to apply col-sm-4.
HTML
<div class="row">
<div class="col-sm-3" ng-repeat="el in vm.filmovi"
ng-class="{'col-sm-4': vm.addColSm4, 'col-sm-3': !vm.addColSm4 }" >
.. Html will stay as is ..
</div>
</div>
<li>
<a href="#" ng-hide="vm.ulogovan"
ng-click="vm.dugme()">
losta
</a>
</li>
Code
vm.dugme = function (){
vm.addColSm4 = true;
};
Demo Plunker
I need to grab the number between [ and ] within the selected class of an li list, and store the number in a variable. I've tried the following, but I'm missing something. I'm not sure of the regex required to look between brackets and grab a string.
Javascript
var assetID = $(".selected:contains('on-air-date').find('[]');
HTML
<ul id="asset-list" class="expandable selectable normal" style="height: 671px;">
<li class="selected">
<div class="thumb">
<a href="/content/assets/750">
<img src="https://www.google.com/images/srpr/logo11w.png">
</a>
</div>
<div class="title">
<div>
<strong>Title of story</strong>
<br>
<span class="on-air-date">
On air: 10/28/14 05:30:00pm
[750]
</span>
<br>
<span class="blue radius label">Staging</span>
<span class="green radius label">Live</span>
</div>
</div>
</li>
<li>
<div class="thumb">
<a href="/content/assets/4200">
<img src="https://www.google.com/images/srpr/logo11w.png">
</a>
</div>
<div class="title">
<div>
<strong>Another story title</strong>
<br>
<span class="on-air-date">
On air: 12/10/14 02:09:18pm
[4200]
</span>
<br>
<span class="blue radius label">type label</span>
</div>
</div>
</li>
<li>
<div class="thumb">
<a href="/content/assets/4201">
<img src="https://www.google.com/images/srpr/logo11w.png">
</a>
</div>
<div class="title">
<div>
<strong>Yet another story title</strong>
<br>
<span class="on-air-date">
On air: 12/10/14 02:09:18pm
[4201]
</span>
<br>
<span class="blue radius label">type label</span>
</div>
</div>
</li>
</ul>
JSFiddle: link
Your current code is invalid, as :contains is used to look for a text value within an element, not a class. You need to use find() and text() to retrieve the value in the element. From there you can use a regular expression to extract the value in the braces. Try this:
var selectedAirDateText = $('.selected').find('.on-air-date').text();
var matches = /\[(.+)\]/gi.exec(selectedAirDateText);
console.log(matches[1]); // = '750'
Example fiddle
A regular expression can help you get the number as follows:
var num = $('.selected span.on-air-date').text().replace(/[^\[]*\[(\d+)\].*/,'$1');
Demo
:contains('on-air-date') not valid, you cannot use contains to access the child elements with the specified class. Also .find('[]') not valid. The following code worked for me:
$('.selected').click(function () {
var assetID = $(this).find('.on-air-date').text().split('[')[1].replace(']', '');
//this first splits the text into two by '['
//then we get the second half by [1]
//finally we remove the last character ']' by using .replace
alert(assetID);
})
Demo: https://jsfiddle.net/k3keq3vL/1/
You'll need to first get the single item you need or run an $.each to get all in the page.
//run the each statement
$(".on-air-date").each(function(index,value) {
//set the string (str) variable to the value's text which is inside the <span>
var str = $(value).text();
// match the string with [ ] with anything inside. and then remove the last ]. Then take the substring of the content after the [
var value = str.match(/\[(.*?)\]/g)[0].replace(/\]/g,'').substring(1,str.length-1));
});
http://jsfiddle.net/k3keq3vL/8/
Open your console to see the list of numbers returned in the console.log of the string match and substring