I am currently listing 10 items per page , and problem is that when this function is called it will only target 1st (latest) element and do nothing on rest of them.
My question is :
How would i target each individual
<span id="report-text"></span>
with <i id="report"></i> element that belong to same unique-id <div id="$dbstuff></div> given by PHP.
This is my Jquery code to target element
$('#report').hover(function(){
$('#report-text').show();
},function(){
$('#report-text').hide();
});
HTML code is following :
<div class="vote_wrap" id="<?php echo $row->id;?>">
<span id="report-text">Report Inappropriate Content</span>
<i class="fa fa-exclamation" id="report"></i>
</div>
You can do it by achieving right selectors .. use class as suggestions in comments ..
Do as below-
JS
$('.report').hover(function(){
$(this).prev('.report-text').show();
},function(){
$(this).prev('.report-text').hide();
});
HTML
<div class="vote_wrap" id="<?php echo $row->id;?>">
<span class="report-text">Report Inappropriate Content</span>
<i class="fa fa-exclamation" class="report"></i>
</div>
Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM.
Source
Change your ID's to Class
Related
I have an html table that is filled from a database.
I have a column that have this 2 "buttons"
<a onclick="modifica()" href="#" title="modifica"><i class="fa fa-edit"></i></a>
<a onclick="delete()" href="#" title="elimina"><i class="fa fa-trash"></i></a>
P.S: fa fa-edit and fa fa-thresh are from Font Awesome.
anyway, when i click one of them, i need the function retrieve data from table and read the column ID, but with some tests i've done, i didn't get the result that i want.
someone can help me?
thanks.
There are a lot of possibilities. But if i understood your problem correctly you could print the ID in your row or directly to your function for every row.
<a onclick="modifica(<?php echo $row['id']; ?>)" href="#" title="modifica"><i class="fa fa-edit"></i></a>
Something like this. Or you could add a data value to your row with data-id="<?php echo $row['id']; ?>". Then use javascript so get the next parent data value. Then you have the ID and you can work with it.
Data Attributes:
https://www.w3schools.com/tags/att_global_data.asp
JQuery data:
https://api.jquery.com/data/
So i hope i understood your question correctly.
You will have to modify whatever code generates your HTML to either include the ID you need inside the called function, like:
onclick="modifica(2056)" - 2056 is whatever ID your modifica function requires to work
of add an id to the clickable elements:
<a onclick="modifica()" href="#" title="modifica" id="2056"><i class="fa fa-edit"></i></a>
and have modifica use javascript to read the ID of the calling element.
The same applies to the delete function as well.
2 ways:
1.- As suggested, if you have the chance to assign the row ID as an attribute to the buttons, you can pass that attribute with onclick method to your JS function.
2.- If you CAN'T assign the row ID to the buttons, then you can add some jQuery selectors to your JS function to retrieve the value:
<a onclick="modifica(this)" href="#" title="modifica"><i class="fa fa-edit"></i></a>
and in your JS file:
function modifica(button){
var id = $(button).parent().parent().attr("id");
//Do Something Else with ID
}
The first parent is <td> and the second is <tr>.
I have to hide my parent span just above <a> tag and show the span just below it.(When clicking it on the <a> tag).
I need to use getParent() because their are another same <div>s repeating
My HTML is
<div class="Test">
<p class="commentBody">
<span class="view_more-comment">abcd...
<a class="view_more_link" href="javascript:void(0);" onclick="$(this).getParent().getNext().style.display='';$(this).getParent().style.display='none';">more</a>
</span>
<span class="view_more" style="display: none;">abcdefghijklmnopqrstuvwzyz...
<a class="view_less_link" onclick="$(this).getParent().getPrevious().style.display='';$(this).getParent().style.display='none';">less</a>
</span>
</p>
</div>
When I use this console shows the error
Uncaught TypeError: $(...).getParent is not a function
Any method to solve this problem?.
There is no getParent() in jQuery. Use:
onclick="$(this).parent().prev().show(); $(this).parent().hide();"
Docs
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
I'd recommend you to use on for event handling and not inline handlers
EDIT
Using jQuery:
$('.view_less_link').on('click', function() {
$(this).closest('.commentBody').find('.view_more-comment').show();
$(this).parent().hide();
});
Use .parent() instead of getParent().
Update your html as below and keep a similar class for both the links
DEMO
<span class="view_more-comment more">abcd...
<a class="view_link " href="javascript:void(0);">more</a>
</span>
<span class="view_more less" style="display: none;">abcdefghijklmnopqrstuvwzyz...
<a class="view_link" href="javascript:void(0);">less</a>
</span>
and then this JS
$('.view_link').on('click',function(){
$(this).parent().slideToggle(200);
$(this).parent().siblings().slideToggle(200);
});
I am trying to create my own greasemonkey script for my favorite directory listing site :)
The thing is not everything it list is beneficial to me, I inspected the website code and as it seems, each entry is under
Now, and as it seems, I am only interested with those which have this format:
<tr class="project-description">
<td colspan="6">
<div class="project-desc-inner">
<div class="project-synopsis">
<p class="trunk8">This is an entry</p>
</div>
<div class="project-verification">
<span class="verfied-badge"> <~~~~~~~~~~ THIS SPAN
<span class="currency-symbol">$</span>
<span class="icon-tick"></span>
Verified
</span>
</div>
<div class="project-actions">
<a href="#">
<button class="btn">LOL</button>
</a>
</div>
</div>
</td>
</tr>
As you can see, the existence of <span class="verfied-badge"> triggers it.
I also wish that the javascript process this after the page loads, because the site populates the table via javascript too.
I know I haven't done in my problem yet, but if somebody can just provide an example that can lead me, that is enough.
Thank you very much!
$(document).ready(function(){
$("tr.project-details").each(function(){
var self = $(this);
if(self.find("span.verfied-badge").length==0)
self.remove();
});
});
Filtered selector that calls .remove only once
Since there're other span elements within TR that are unrelated to the problem it's not possible to write a pure CSS filter selector string (so we could either use .has) to sufficiently filter elements. but instead of removing each table row individually we filter them first and remove them all at once.
$("tr.project-description").filter(function() {
return !$("span.verfied-badge", this).length;
}).remove();
My goal is to create an element to serve as a placeholder of an existing element. For styling purposes I need to move the element right after another element (position: absolute is not a good solution) so I can set the position dynamic.
My problem is the markup is generated by javascript and the only option I have is to tweak it via javascript also. It is a third party widget that I need to override.
Current markup:
<li class="...">
<a class="time" href="...." >
<time pubdate="" class="...">...</time>
</a>
<div class="...">
...
</div>
<div class="...">
...
</div>
<div class="bottom-wrapper">
<span class="stats-container">
<span class="stats">
<span class="likes">
...
</span>
<span class="favorites">
...
</span>
</span>
</span>
</div>
I want to move the a.time into a new span after span.likes.
Goal:
<li class="...">
<div class="...">
...
</div>
<div class="...">
...
</div>
<div class="bottom-wrapper">
<span class="stats-container">
<span class="stats">
<span class="likes">
...
</span>
<span class="new-span">
<a class="time" href="...." >
<time pubdate="" class="...">...</time>
</a>
</span>
<span class="favorites">
...
</span>
</span>
</span>
</div>
</li>
I need to do it in native javascript (No Jquery) for some reason.
My code:
// Create a new, plain <span> element
var createElem = document.createElement('span');
// Get a reference to the element, before we want to insert the element
var containerElem = document.getElementsByClassName("likes");
// Get a reference to the parent element
var parentDiv = containerElem.parentNode;
// Insert the new element into the DOM after containerElem
parentDiv.insertBefore(createElem, containerElem.nextSibling);
However, the above code throw an error (please see below):
Uncaught TypeError: Cannot call method 'insertBefore' of null
Uncaught TypeError: Cannot call method 'insertBefore' of undefined
Any idea how I can do this? Thanks
EDIT: I have multiple LI as well. So I need to traverse all the LI in this script.
containerElem is an array :
var parentDiv = containerElem[0].parentNode;
getElementsByClassName is not a safe cross-browser DOM method. It will not work in IE 8 and below. If you need cross-browser support then using a getElementsByTagName('span') and checking the .className property would be a better option. Or better yet, just give the span an id and use getElementById (but I'm sure that thought must have occurred to you already).
Also, as #salexch rightly pointed out, if a DOM method returns a group of elements (HTMLCollection) as getElementsByClassName and getElementsByTagName do, then you must use indices (containerElem[0]) to access the individual elements within the collections.
"I tried your correction above but I get this error Uncaught TypeError: Cannot read property 'parentNode' of undefined"
This means the collection returned by your DOM method is empty. Are you sure that the span with class "likes" exists in the DOM at the time getElementsByClassName is called?
The rest looks fine. Hope you find your solution soon.
I'm quite to new to JQueryMobile, JavaScript and HTML. In my screen I have a list of elements that are creates dynamically and when you click on each element it should get you to another screen depending on the name of the list item you clicked.
I have tried to get the a tag id, value, name... but it doesn't work... here is my code for each line:
<li style='height:30px;' id='$object'>
<a class='resume' id='$object' href='javascript:loadGraph(this);'>
<span class='name' style='font-size:10pt;height:5px;' value='$object'>$object </span>
<span class='data' style='background:$alarmColor;font-size:10pt;color:$alarmText;height:15px;'>$debitPrevMax</span>
</a>
<a class='info' id='$object' href='javascript:threshold(this)'>Alarm Info</a>
</li>
The list have split buttons.
"When I tried to access to element.id I get undefined"
When you do this...
href='javascript:threshold(this)'
...this is not a reference to the element. That's why the id is undefined.
You'd need to use onclick= instead.
onclick=':threshold(this)'
Also, as I stated in the comment above, you can not have duplicated IDs on a page. You'll likely only be able to fetch the first.
Even if you're not using them for DOM selection, it still isn't a good idea to have duplicates.