I have a div like this:
<div class="movie">
Date:
<span class="date"> June 12, 1987 </span>
Título:
<span class="title">
<a class="select_movie" href="#">
Predator
</a>
</span>
Director: <span class="director">John McTiernan</span>
Starring: <span class="starring">Arnold Schwarzenegger</span>
</div>
I want all the text nodes in <div class="movie">, after the click of a link .select_movie
$('.select_movie').click(function(){
..........
..........
});
at the end I need to retrieve the value of the nodes to be assigned to a variables, like this:
var date = June 12, 1987;
var title = Predator;
var director = John McTiernan;
var starring = Arnold Schwarzenegger;
Try this in order to get each of the values:
$('.select_movie').click(function(){
var movie = $(this).closest(".movie");
var date = $(movie).find(".date").text();
var title = $(movie).find(".title .select_movie").text();
var director = $(movie).find(".director").text();
var starring = $(movie).find(".starring").text();
});
Fiddle: http://jsfiddle.net/unwgeqce/1/
something like this for each var:
var date = $('.movie').find('.date').text();
Related
This is my HTML:
<p class="myclass">
<span class="generalclass">text1</span>
<span>text2</span>
<span>text3</span>
</p>
<p class="myclass">
<span class="generalclass">text1</span>
<span>text2</span>
<span>text3</span>
</p>
and each of the other 3 <p> tags are identical.
This my jQuery Code:
var promo = $('[class^="myclass"]').map(function() {
return $(this).text();
//I try something like return $(this).children.text(':first') but NOT Work
}).get();
let promo1 = promo[0];
let promo2 = promo[1];
let promo3 = promo[2];
Results:
promo1 = text1
text2
text3
How can I get the text from only <span> / ROW 1 and not the other span tag content?
tks
var promo = $('[class^="myclass"]').map(function() {
return $(this).children(":first").html();
}).get();
let promo1 = promo[0];
let promo2 = promo[1];
let promo3 = promo[2];
try this code to get the value from the first <span>
var promo = $('[class^="myclass"]').map(function() {
return $(this).find("span:first-of-type").text();
}).get();
How to get iterated value of an object returned from XPATH request.
I have this HTML template:
<div class="item">
<span class="light">Date</span>
<a class="link" href="">2018</a>
(4pop)
</div>
<div class="item">
<span class="light">From</span>
<span>
<a class="link" href="" title="Bob" itemprop="url"><span itemprop="name">Bob</span></a>,
</span>
<span>
<a class="link" href="" title="Peter" itemprop="url"><span itemprop="name">Peter</span></a>
</span>
</div>
<div class="item">
<span class="light">For</span>
<a class="link" href="">Bak</a>,
<a class="link" href="">Cam</a>,
<a class="link" href="">Oli</a>
</div>
<div class="item">
<span class="light">Nat</span>
<a class="link" href="">Cool</a>
</div>
</div>
And my Javascript code:
var doc = new DOMParser().parseFromString(HTMLContent,'text/html');
var infos = doc.evaluate('//div[#class="item"]/span[1]', doc, null, XPathResult.ANY_TYPE, null);
var nodes = [];
for(var node = infos.iterateNext(); node; node = infos.iterateNext()) {
nodes.push(node);
console.log(node.textContent);
// Until here, all things works well ! Except the code from here:
var nodde = node.nextElementSibling.attributes;
nodde.forEach(function(item){
console.log(item);
});
}
My goal is to get the respective value for each categorie, for example:
Date = 2018, (4pop)
From = Bob, Peter
For = Bak, Cam, Oli
Nat = Cool
I tried to iterate: node.nextElementSibling.attributes but without any success !
What i have tried:
var nodde = node.nextElementSibling.attributes;
nodde.forEach(function(item){
console.log(item);
});
You can check it on the Javascript code, but unfortunatelly This will give null result.
Is there a way to get the expected result please ?
Once you get an item you can iterate through childNodes which include tags and texts.
var items = document.evaluate('//div[#class="item"]', doc, null, XPathResult.ANY_TYPE, null);
while (item = items.iterateNext()) {
var values = [];
var nodes = item.childNodes;
for (var i = 2; i < nodes.length; i++) {
var value = nodes[i].textContent.trim().replace(',', '');
if (value.length) values.push(value);
}
console.log(item.getElementsByClassName('light')[0].innerText + " = " + values.join(', '));
}
Prints:
Date = 2018, (4pop)
From = Bob, Peter
For = Bak, Cam, Oli
Nat = Cool
Have a html string see below.
<div sentence="11">
<p>
how are you Tom, how are you Tom
</p>
</div>
<div sentence="12">
<p>
how are you Tom
</p>
</div>
When user select the name 'Tom', I will replace the string 'Tom' using a name tag with some html style. The result what I want see below.
<div sentence="11">
<p>
how are you <span class="ano-subject" data-oristr="Tom" data-offset="1" data-sentence="11"><NAME></span>, how are you <span class="ano-subject" data-oristr="Tom" data-offset="2" data-sentence="11"><NAME></span>
</p>
</div>
<div sentence="12">
<p>
how are you <span class="ano-subject" data-oristr="Tom" data-offset="1" data-sentence="12"><NAME></span>
</p>
</div>
I will using the code below to do the replace.
var content = HTML CODE ABOVE;
var selectText = 'Tom';
var regex = new RegExp('(?=\\s|^|\\b)(?:' + selectText + ')(?=\\s|$|\\b)', "g");
var pre_sentence = 0;
var offset = 0；
content = content.replace(regex, function(match, position) {
var curr_sentence = ???; // how can I get this element's parent div attribute 'sentence' ?
if（pre_sentence != cur_sentence）{
// this is new sentence.
offset = 1;
pre_sentence = curr_sentence;
} else {
offset++;
}
var replace = '<span class="ano-subject" data-oristr="Tom" data-offset="'+offset+'" data-sentence="'+curr_sentence+'"><NAME></span>';
return replace;
});
In my Chrome extension, I'm trying to get info from a page (the value of "data-timestamp": 1490893300813) via a content script, but the result shows 'null'.
//content script:
var tsx = document.getElementsByClassName("date");
var i;
const ts = new Array;
for (i = 0; i < tsx.length; i++) {
var ts[i] = tsx[i].getAttribute("data-timestamp");
console.log("Timestamp" + i + ": " + ts[i]);
}
<!--source code from page:-->
<div class="thread">
<span data-timestamp="1490893300813" class="date">
<span class="absolute">Do, 30.03.2017, 19:01</span>
<span class="relative"></span>
</span>
</div>
I also noticed that the data-timestamp attribute is visible when I show source-code of the page (Ctrl+U) but it isn't visible in DevTools...
You can use document.querySelector('.date') to select the element that has the date class. From there, you can get the element.dataset.timestamp to get the timestamp.
Your code could look something like:
//Get the timestamp as a number ( + is used to convert from a string to a number).
var timestamp = +document.querySelector('.date').dataset.timestamp;
console.log('Timestamp:', timestamp);
//Convert to a Date and display in ISO format for the UTC timezone.
var date = new Date(timestamp);
console.log(date.toISOString());
<div class="thread">
<span data-timestamp="1490893300813" class="date">
<span class="absolute">Do, 30.03.2017, 19:01</span>
<span class="relative"></span>
</span>
</div>
Hello i have cart full with Elements
This Ex of one of them
<div class="item-container cart-item">
<div>
<img border="0" onerror="src='http://www.myengravedjewelry.com/Admin/surfing.jpg'" title="Bloody Mary Style Colour Name Necklace" src="http://www.myengravedjewelry.com/Admin/surfing.jpg" alt="1009">
<div class="item-header">
<div class="item-body">
<ul class="item-ul">
<li>
<li>
<li>
<span class="bold-14">Price:14.9 </span>
</li>
<li>
<span>ShortId:1010 </span>
</li>
<li>
<span>LongId:110-01-073-10 </span>
</li>
<li>
<span class="spanDefCat">DefaultCat:334 </span>
</li>
</ul>
</div>
</div>
<div class="item-footer"></div>
</div>
When i press save i go trow each one of this element and check if DefaultCat==0
var elements = document.getElementsByClassName("cart-item");
and i try to get to this defaulCat like this
for(i=0;i<elements.length;i++){
var elementContent=elements[i].find(".spanDefCat").html();
var vars = elementContent.split(" ");
var obj = {};
vars.forEach(function(v) {
var keyValue = v.split(":");
obj[keyValue[0]] = keyValue[1];
});
DefaultCat = obj["DefaultCat"];
ShortId = elements[i].children[1].alt;//New style to take ShortID
if(DefaultCat==0)setDefaultCatToProductId(parseInt(ShortId));
arrSortedOrder[i]=parseInt(ShortId);
}
Any one know how to get to this value?
p.s
Plz Do NOT give me solution with $(.spanDefCat) because when i find deff=0 i need to take ShordId as Well from this element[i]
Try this:
$(".cart-item").each(function(){
var shortId = $(this).find(".bold-14").parent("li").siblings("li").children("span").html();
var shortItem = shortId.replace(' ','').split(":");
var defaultCat = $(this).find(".spanDefCat").html();
var item = defaultCat.replace(' ','').split(":");
if(item[1]==0){
var id = parseInt(shortItem[1]);
//do something
}else{
var id = parseInt(shortItem[1]);
//do something else
}
console.log(defaultCat);
console.log(shortId);
});
Note: Above code give you the DefaultCat:334 and ShortId:1010 so now you can use both in if else statement.
If the format of DefaultCat:334 is same for all cart item then you can check whether it is 0 or not
JSFIDDLE DEMO
I see JQuery tag so i give you a response with JQuery statements.
$(".cart-item").find(".spanDefCat").each(function(index, domEle){
//get text, delete spaces and split
split_result = $(domEle).text().replace(' ','').split(":");
//get only numeric value as string
defaultCat = split_result[1];
//parse into int
defaultCat = parseInt(defaultCat);
//if your var is equal to 0
if(defaultCat == 0){
/*********************
* Type you code here *
**********************/
}
});