I am trying to parse the content/value of the class "links". Following is the code that I use:
function modifyDOM() {
return document.body.innerHTML;
}
function getAnswers() {
chrome.tabs.executeScript({
code: '(' + modifyDOM + ')();'
}, (results) => {
var myVar = $(results[0]).find('.links').val();
return console.log(myVar);
});
}
results[0] contains the following example:
<div class="flex-center position-ref full-height">
<div class="content">
<div class="title m-b-md">Title</div>
<input type="hidden" name="_token" value="eJUTXXLfSGs5UsIwpWPcQxthzqN7nt5F0XdRZEoG">
<div class="links">
Test 1
Test 2
Test 3
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://test.com/js/app.js"></script>
The issue is that console.log(myVar); does not output anything.
Am I doing anything wrong here? Any help is highly appreciated.
You need to use .text() or .html() in your code:-
Simple example:-
var answers = [];
$('.links a').each(function(){
answers.push($(this).text()); // can use .html() also
});
console.log(answers);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-center position-ref full-height">
<div class="content">
<div class="title m-b-md">Title</div>
<input type="hidden" name="_token" value="eJUTXXLfSGs5UsIwpWPcQxthzqN7nt5F0XdRZEoG">
<div class="links">
Test 1
Test 2
Test 3
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://test.com/js/app.js"></script>
Note:- So change below line in your code. My be your code starts working:-
var myVar = $(results[0]).find('.links a').text(); //or use .html()
Related
I have the following code that counts the number of divs inside a page:
jQuery(function($) {
$(document).ready(function() {
alert( $(".contentMachine").length );
});
});
Now, I want the result of that to appear inside an html div I made:
<span class="subtitleMain" id="totalMachines">0</span>
How can I put the numbers inside that instead of having the alert box everytime the page loads?
Sorry! I literally just started learning javascript yesterday.
Like this:
$(document).ready(function() {
$("#totalMachines").text($(".contentMachine").length);
});
You can use text. Prior to that you need to get the DOM element using either the id selector or class selector
jQuery(function($) {
$("#totalMachines").text(' Total ' + $(".contentMachine").length)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contentMachine">1</div>
<div class="contentMachine">1</div>
<div class="contentMachine">1</div>
<div class="contentMachine">1</div>
<div class="contentMachine">1</div>
<div class="contentMachine">1</div>
<div class="contentMachine">1</div>
<span class="subtitleMain" id="totalMachines">0</span>
If the initial content of #totalMachines is empty then you can also use append
jQuery(function($) {
$("#totalMachines").append(' Total ' + $(".contentMachine").length)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contentMachine">1</div>
<div class="contentMachine">1</div>
<div class="contentMachine">1</div>
<div class="contentMachine">1</div>
<div class="contentMachine">1</div>
<div class="contentMachine">1</div>
<div class="contentMachine">1</div>
<span class="subtitleMain" id="totalMachines"></span>
$('#totalMachines').html('Total: '+$('.contentMachine').length)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="subtitleMain" id="totalMachines">0</span>
<div class="contentMachine"></div>
<div class="contentMachine"></div>
<div class="contentMachine"></div>
<div class="contentMachine"></div>
Hello I have this html code:
<div class="row newrow">
<div class="col-10"><b>this</b></div>
<div class="col-2">
<img src="close.png" id="exit"/>
</div>
</div>
When I click on img with id exit using this code
$('body').on('click','#exit',function(e){
})
I need to get the text of the <b>behind it which would be "this"
I have tried this but it does not work:
$('body').on('click','#exit',function(e){
$q = $(e.target).prev('b')
var word = $q.text()
)}
It only gives me the that I clicked from the beginning
try this:
$('body').on('click','#exit',function(e){
var this_b = $(this).parent().prev().children(0).html();// get the text
alert(this_b);
});
You can use $(this).closest('.row').find('b'):
$('#exit').click(function(e){
$q = $(this).closest('.row').find('b');
var word = $q.text();
console.log(word);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row newrow">
<div class="col-10"><b>this</b></div>
<div class="col-2">
<img src="close.png" id="exit"/>
</div>
</div>
You need to select the parent of the clicked img to get the the .col-2, and then get the col-2's prev() to get to the .col-10, and then you can access its children() to get the children (the single <b>). Also, there's no need for e.target if you use this:
$('body').on('click', '#exit', function() {
$q = $(this).parent().prev().children();
var word = $q.text()
console.log(word);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row newrow">
<div class="col-10"><b>this</b></div>
<div class="col-2">
<img src="close.png" id="exit" />
</div>
</div>
Try this
$('body').on('click','#exit',function(e){
var word = $(this).closest('.newrow').find('b').text();
});
I have following HTML. I am trying to find the clicked item. For example: if I clicked on ups the o/p should be ups like that. I have written
like this but not getting what I need.This returns all text.
$('.sentiment-text .text').on('click',function(e) {
var str = $('.sentiment-text .text').find('span').text();
alert(str);
});
Here is the HTML code which I am trying.After I have written above code I am getting full text But not getting only the item I clicked
<div class="sentiment-text">
<div class="wrapper">
<div class="key"></div>
<div class="text" style="cursor: pointer;"><div class="tags alert-success">×
<span class="noun">Thumbs</span>
<span class="adverb">up</span>
<span class="verb">ups</span>
<span class="verb">down</span>
</div>
</div>
<div class="clear-sentiment"></div>
</div>
</div>
You need to use this for the context and target the span in the selector itself.
$('.sentiment-text .text span').on('click',function(e) {
var str = $(this).text();
alert(str);
});
DEMO
So rather that putting the handler on the div why not target the spans within .text and report the text
$('.text span').on('click', function(e) {
var str = $(this).text();
alert(str);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sentiment-text">
<div class="wrapper">
<div class="key"></div>
<div class="text" style="cursor: pointer;">
<div class="tags alert-success">×
<span class="noun">Thumbs</span>
<span class="adverb">up</span>
<span class="verb">ups</span>
<span class="verb">down</span>
</div>
</div>
<div class="clear-sentiment"></div>
</div>
</div>
Use below:
$('.text span').on('click', function() {
alert($(this).text());
});
$('.sentiment-text span').on('click',function(e) {
var str = $(this).text();
alert(str);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sentiment-text">
<div class="wrapper">
<div class="key"></div>
<div class="text" style="cursor: pointer;"><div class="tags alert-success">×
<span class="noun">Thumbs</span>
<span class="adverb">up</span>
<span class="verb">ups</span>
<span class="verb">down</span>
</div>
</div>
<div class="clear-sentiment"></div>
</div>
</div>
try this :
$('.sentiment-text .text').find('span').on('click',function(e) {
var str = $(this).text();
alert(str);
});
I have solved this way
$('.sentiment-text span').live('click',function(e) {
var str = $(this).text();
alert(str);
});
Note that changed 'on' to 'live'. I know it is deprecated form Jquery 1.7.But no other way for me.
Please see the following code:
<div id="song" class="s1">
<div class = "l">foo</div>
<div class="r">
<div>foo</div><div>foo</div>
<div class="link">Link</div>
</div></div>
<div id="song" class="s2">
<div class = "l">foo</div>
<div class="r">
<div>foo</div><div>foo</div>
<div class="link">Link</div>
</div></div>
<div id="song" class="s3">
<div class = "l">foo</div>
<div class="r">
<div>foo</div><div>foo</div>
<div class="link">Link</div>
</div></div>
There are several more s like these. I've to get the link from the first <div> whose ID is song only using JavaScript because I've fetched this data using php into an <object> tag.
Thank you :)
You should use JQuery like (at the bottom of your file):
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
var links = $.map($('div#song .link a'), function(a) { return $(a).attr('href'); });
console.log(links);
</script>
Output:
["some url", "some url", "some url"]
Noting only the first set,
<div id="song1" class="s1">
<div class = "l">foo</div>
<div class="r">
<div>foo</div>
<div>foo</div>
<div class="link">Link</div>
</div>
You can get the link which is some url by
var link = $(".s1").find("a");
console.log(link.attr('href') );
I have a HTML string that I convert to a JQuery node set:
var html = "<div id='foo'><div id='bar'></div></div>";
var nodes = $(html);
I want to add the content <div id="baz"></div> immediately after <div id='bar'></div>. I tried using:
nodes.find('#bar').prepend('<div id="baz"></div>');
But this yields the result:
<div id="foo">
<div id="bar">
<div id="baz"></div>
</div>
</div
But what I want is:
<div id="foo">
<div id="bar"></div>
<div id="baz"></div>
</div>
nodes.append('<div id="baz"></div>');
or...
$('<div>',{id:"baz"}).appendTo(nodes);
Try after
nodes.find('#bar').after('<div id="baz"></div>');
Here is the sample : http://jsfiddle.net/UCghk/3/