I am trying to loop through a few divs.
Code:
$(".tree div ").each(function () {
var _searchthis = $(this);
var mySearchDiv = _searchthis.parent('div').attr('id');
console.log("this is ID : " + $(this).attr('id'));
console.log("this is parentID : " + mySearchDiv);
});
In case of ID, I am getting the value. But it does not return the .parent('div').attr('id')
I am getting "undefined".
Edited :
When I use .closest() ,instead of .parent(), I get the ID of $(this) only.
.parents('div').first().attr('id') also returns "undefined".
$(".tree li div ").each(function (){
....
}
was a desperate attempt.
HTML Code is more like: http://jsbin.com/yilaw/1/edit
===================================
RESOLVED. I had problem with my HTML structure. Thanks Guys.
Try changing your code to this:
_searchthis.parents("div").eq(0).attr('id');
.parent() parent goes only to the first level while .parents() goes up the stack.
Notice the difference here : http://jsbin.com/labugi/1/edit
html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="firstLevel">
<span id="secondLevel">
<p id="thirdLevel">
<i id="forthLevel">POC</i>
</p>
<span>
</div>
</body>
</html>
javascript
var result = $('#forthLevel').parent('div').attr('id');
console.log('result of .parent("div"): '+ result);
var result = $('#forthLevel').parents('div').attr('id');
console.log('result of .parents("div"): '+ result);
JQuery says about parent : http://api.jquery.com/parent/
The .parents() and .parent() methods are similar, except that the
latter only travels a single level up the DOM tree.
Use parents instead and get the first element like so : _searchthis.parents('div').eq(0);
Please note : the search query that you are using might be very slow, use classes or ids if possible instead of tagNames.
Related
I have been making a search functionality for the other HTML page. I am getting HTML from another page as a string and trying to parse that string to match data of all p's and heading tags. When it finds some specific string then it should return that p or heading with full text. The problem is that I am getting all the p's and headings and can't be able to iterate each element step by step.
Here is my jQuery code
$(document).ready(function()
{
$.get("file.html", function(html_string)
{
var parsed = $('<html/>').append(html_string);
$.each(parsed, function( i, el ) {
console.log(parsed.find("p").text());// here it is getting the text of all the p elements. But I need to iterate each p step by step so that I will be able to search my specific keyword
});
},'html');
});
file.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>Name</h3>
<p>Zain Farooq</p>
<h3>search</h3>
<p>Yes Search this</p><!-- When it finds this then it should return this-->
</body>
</html>
I have also used domparser but it is not giving me desired results
You should use .each function.
$.each(parsed, function( i, el ) {
parsed.find("p").each(function(index) {
console.log( index + ": " + $( this ).text() );
});
});
I have tried to reduce following code
var wgDialog
= jQuery(".ui-dialog.ui-overlay-visible",window.parent.document)
.each
(function(nIndex)
{
var sWidgetName = $(this).attr('data-widgetvar');
var wgDialog = window.parent.PF(sWidgetName);
});
to this code
var jqDialog
= jQuery(".ui-dialog.ui-overlay-visible",window.parent.document)
.children(":first-child");
var sWidgetName = jqDialog.attr('data-widgetvar');
var wgDialog = window.parent.PF(sWidgetName);
but this doesn't work !
The sWidgetName variable is always undefined in last code.
What is my mistake ?
With help of comments, I have found a solution.
I must use get(0) to obtain first element in list returner by JQuery().
And I must use $(jqDialog) instead of jqDialog to get 'data-widgetvar' attribute.
Here is my new code
var jqDialog
= jQuery(".ui-dialog.ui-overlay-visible",window.parent.document)
.get(0);
var sWidgetName = $(jqDialog).attr('data-widgetvar');
var wgDialog = window.parent.PF(sWidgetName);
Assuming you want to access an element with attribute data-widgetvar nested in an element having css classes ui-dialog and ui-overlay-visible you could do the following with plain javascript:
var myElement = document.querySelector('.ui-dialog.ui-overlay-visible [data-widgetvar]');
querySelector allows a CSS like selector combining class together with attribute selector.
Update:
Here is a working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>
<script type="text/javascript">
function main() {
var myElement = document.querySelector('.ui-dialog.ui-overlay-visible [data-widgetvar]');
console.log("Attribute value", myElement.getAttribute('data-widgetvar'));
}
document.addEventListener("DOMContentLoaded", main);
</script>
</head>
<body>
<div class="ui-dialog ui-overlay-visible">
<div>some element</div>
<div data-widgetvar="someValue">some text content</div>
</div>
</body>
</html>
I wanted to create an updates list, when you see only the title of the update- unless you click on a down-pointing triangle near the title, and then you will see the full update information + the down-pointing triangle will change to an up-pointing triangle. And after clicking on the up-pointing triangle- you will see only the title of the update again + the triangle will be down-pointing.
So I wrote the following code in order to implement that:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
arrowsUpdate();
</script>
<p>
<span class="down-arrow">▼</span>
<br>
<span class="hidden-text">update 1</span>
</p>
<p>
<span class="down-arrow">▼</span>
<br>
<span class="hidden-text">update 2</span>
</p>
</body>
</html>
JS:
function arrowsUpdate(){
$(document).ready(function(){
$(".down-arrow").each(function(){
$(this).click(function(){
$(this).siblings(".hidden-text").slideToggle(0,"linear");
if($(this).html()=="▼")
$(this).html("▲");
else
$(this).html("▼");
});
});
});
}
The problem with this code is that the pointing triangle is always down-pointing. It seems that there is a problem with the if statement- which always returns false.
I don't understand why that happens, especially when the set code lines ($(this).html("▲");and $(this).html("▼");) are working as expected (tried using those code lines in a different page- and it works).
Why the condition $(this).html()=="▼" returns always false, if the content of this is ▼?
You can set html with entities, but when you get it back, it will no longer be entities but characters, that's how entities work.
To be clearer, this line fails every time
if( $(this).html()=="▼" )
because $(this).html() will never return an entity, but the character ▼ instead, proof ...
document.body.innerHTML = '▼';
console.log( document.body.innerHTML )
An easier way to create toggle functionality without relying on the markup, would be to just use a flag
function arrowsUpdate() {
$(".down-arrow").on('click', function() {
$(this).siblings(".hidden-text").slideToggle(0, "linear");
var flag = $(this).data('flag');
$(this).html(flag ? "▼" : "▲").data('flag', !flag);
});
}
I am totally new to coding. Please help.I am obtaining tweet text using node.js and displaying using html. When I input new text the result should replace earlier result in #tweets and not append to it
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
#<input type="text" id="tag" class="hash"/>
<button>submit</button>
</form>
<div id="tweets"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="/socket.io/socket.io.js"> </script>
<script>
var socket = io.connect('/link');
$('.hash').on('keypress',function(){
setTimeout(function(){
$('#tweet').empty();
socket.emit('message', $('#tag').val());
},2000);
return;
});
socket.on('message', function(msg){
$('#tag').val('');
$('#tweet').empty();
$('#tweets').after($('<div>').text(msg));
});
</script>
</body>
<html>
Replace .after with .html:
$('#tweets').html($('<div>').text(msg));
If I understand you correctly just use text or innerHTML.
For Example:
...
socket.on('message', function(msg){
$('#tag').val('');
$('#tweet').html(msg); //OR
$('#tweet').text(msg);
});
...
Is there also perhaps a misspelled JQuery selector? I cannot find the element "#tweet." It appears in both your timeout and in the socket event handler. I'd personally go with this instead, esp if there is a selector spelling issue.
$("<div />", {
text: msg
}).appendTo($("#tweets").empty());
EDIT: I like SlyBeaver's gist. I thought you needed an inner div for some reason. Rather than deal with .empty().append().chain().a().bunch().of().stuff(), I'd just do for plain text:
$("#tweets").text(msg);
or if the tweet contains HTML, use this or it will not be parsed as such:
$("#tweets").html(msg);
Change
$('#tweets').after($('<div>').text(msg));
to use .html() in jquery
$('#tweets').html($('<div>').text(msg));
document.getElementById('tweets').innerHTML = 'Your content';
In HTML below, I want to retrieve the value of the all <b> tags using JavaScript or jQuery
<html>
<head>
</head>
<body>
<span id=":zz" class="adl">
<b>2</b>
<b>of </b>
<b>143 </b>
</span>
<body>
</html>
Can I retrieve all <b> tag values using class name in jQuery or JavaScript?
You can place the values in to an array using $.map():
var values = $('b').map(function () {
return $(this).text();
}).get();
console.log(values); // = ["2", "of ", "143 "]
Example fiddle
console.log($('span.adl').find('b').text());
You do not need even need classname to do that.just use:
$('.adl b').each(function(){
alert($(this).html());
})