javascript select parent element's child - javascript

For example I want to do something like this:
<td class="repeats">
<img src="a.png"/>
<span onmouseover="this.parentNode.info.src='images/b.png'"
onmouseout ="this.parentNode.info.src='images/a.png'">
text here
</span>
</td>
Without using an ID or JQuery (ideally) I need a way of selecting the image in the current cell. How can this be achieved?
I only want to change the current cell, as opposed to all cells with the same class.

Use previousSibling:
<td class="repeats">
<img src="a.png"/>
<span onmouseover="this.previousSibling.src='images/b.png'"
onmouseout ="this.previousSibling.src='images/a.png'">
text here
</span>
</td>
Docs: https://developer.mozilla.org/en-US/docs/DOM/Node.previousSibling
Or you can use parentNode.childNodes[0]:
<span onmouseover="this.parentNode.childNodes[0].src='images/b.png'"
onmouseout ="this.parentNode.childNodes[0].src='images/a.png'">
text here
</span>

you can try this
$('td[class="repeats"]').children().filter('Img').dosomething();

Related

Angular document.getElementById not working with interpolation dynamically

I have a list of dynamic images that I want to display opacity only when the user hovers over the particular image. My issue is I assign each image an id dynamically but cannot get the property of the element dynamically.
I get and error of Got interpolation ({{}}) where expression was expected
<span *ngFor="let image of imagess">
<img attr.id="Image{{image.id}}"
[src]="sanitizer.bypassSecurityTrustUrl('data:'+image.mimeType+';base64, '+image.frontImage)"
onmouseover="style.opacity=.16;"
onmouseout="style.opacity=1;"
/>
<span onmouseover="document.getElementById('Image'{{image.id}}).style.opacity=.16;"> <----Right here is what I need
//Icons and other things here
</span>
</span>
I would rewrite it to Angular way:
<span *ngFor="let image of images">
<img
...
#img
(mouseover)="img.style.opacity= '.16'"
(mouseout)="img.style.opacity= '1'"
/>
<span
(mouseover)="img.style.opacity= '.16'"
(mouseout)="img.style.opacity= '1'"
>Hover over me</span>
</span>
Ng-run Example

change text content on mouseover to img alt property

i have some img tag with class name box, and a p tag with class title, i need to change on mouseover and change text content of p tag to alt property of img that clicked, please help me.
<table style="width:100%;padding-top:200px;border-bottom:5px solid black;">
<tr style="text-align:right;width:100%;font-size:small;text-align:center;">
<td class="box" style="width:22%;">
<a href="http://xxxxxx.com">
<img src="Images/photo_2016-06-21_12-13-45.jpg" alt="link1" class="imgLogo" />
</a>
</td>
<td class="box" style="width:22%;">
<a href="http://xxxxxxxxx.com">
<img src="Images/photo_2016-06-21_12-13-18.jpg" alt="link2" class="imgLogo" data-tree="oak" onmouseover="reply_click(this);"/>
</a>
</td>
<td class="box" style="width:22%">
<a href="http://xxxxx.com/pwa">
<img src="Images/photo_2016-06-21_12-14-00.jpg" alt="link3" class="imgLogo" />
</a>
</td>
<td class="box" style="width:22%">
<a href="http://xxxx.com">
<img src="Images/photo_2016-06-21_12-13-51.jpg" alt="link4" class="imgLogo" />
</a>
</td>
</tr>
</table>
and my p tag:
<p style="text-align: center" id="title-links" class="title-links">content here</p>
i want to write it with javascript, i dont want to use jQuery.
I coded solution for this question using by javascript.
Add onmouseover and onmouseout event properties into the img tag. As below:
<img src="Images/photo_2016-06-21_12-13-45.jpg" alt="سیستم مدیریت جلسات" class="imgLogo" onmouseover="changeText(this)" onmouseout="changeTextToDefault()"/>
After this, add the following js functions linked to above mouse events.
This changeText() function going to execute when mouse pointer come over the displayed img tag. After, it changes text content of p tag to the value of alt property on img tag.
function changeText(xTag){ document.getElementById("title-links").innerHTML =xTag.getAttribute("alt");}
Also, changeTextToDefault() function going to execute when mouse pointer leaves over the displayed img tag. And, it changes text content of p tag to the default text.
function changeTextToDefault(){ document.getElementById("title-links").innerHTML = "سیستم مدیریت جلسات";}
Here is demo
$(".imgLogo").on("mouseenter", function() {
$("#title-links").text($(this).attr("alt"));
});
Also, please note that the class names you gave in your are different to the ones your supplied in your code...
This code also doesn't require a onmouseover HTML attribute on the img
Put this script in you page.
function reply_click(e) {
$('.title').text(e.alt);
}
Use onmouseover and onmouseout
Script
function showalt(elem){ $('#title-links').text(elem.alt); }
function showdefault(elem){$('#title-links').text('سیستم مدیریت جلسات');}
Here is a demo
On removing mouse default <p> tag content will display

How to type and delete text in a pre-span-wrapped text in conteteditable div while keeping the span tag

Does anyone know how to insert and delete text in a pre-span-wrapped text in content-editable div while keeping the <span id="x"> tag?
In the content-editable div, if delete "kachu", <span id="2"> would also be deleted. I want that specific tag still there even without text.<span id="2></span>
In the content-editable div, if typing in "pi" just before "kachu" to make "pikachu", <span id="2"> would not wrap "pi". I want <span id="2">pikachu</span>
HTML
<div id="inputbox" style="border:1px solid lightgrey" contenteditable="true">
<span id="1">love</span> <span id="1">kachu</span>
</div>
This will change the content of the span containing 'kachu' to an empty string, but finding the span after that will be slightly difficult, since it has the same id as the other span.
$('#inputbox').find('span:contains("kachu")').html( '' );
Once "kachu" is deleted, to find the empty span you could just do the same, but change the contains("kachu") to contains("")
You should consider using different ids for your spans. If you did intend the 2nd span to have id="2", this could be: $('#inputbox').find('#2').html( '' ) or just $('#2').html( '' )

How do I delete the next two siblings and ONLY the next two siblings in this pop-up using jQuery?

So I have a popup. You click on an "+Add Text" link and it adds a text box to the page, along with another "+Add Text link" and an "x" in a span on the right corner of each textbox. When I click an "x" within this popup, I'd like for it to delete the two siblings that immediately follow it. The HTML generated on the page looks something like this...
<div class="popup">
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
</div>
When I click the divs with the class "delete-text-box-x">, I'd like for the following two siblings to be deleted. That is, the following corresponding textarea and "+Add Text" span.
I almost have it. Here is my jQuery
$('.delete-text-box-x').click(_.bind(function(e){
$('.delete-text-box-x').nextUntil('.add-textbox').remove();
}, this));
}
It's obvious why this doesn't work. The nextUntil method does indeed select and remove the textboxes following the 'X' divs. But the selector selects EVERY 'X' on the page, and therefore deletes EVERY textbox on the page. It also doesn't delete the '+Add Textbox' spans...
So how do I get more specific than the current selector I'm using? So it selects ONLY the specific 'X' I click, rather than every 'X' on the page.
Firstly, you need to base the selector on the element that raised the event using the this keyword. From there you can use nextUntil(), but you should use the selector of the next X so that all the required elements are found. Finally you need to use add() to include the clicked X itself. Try this:
$('.delete-text-box-x').click(function (e) {
$(this).nextUntil('.delete-text-box-x').add(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup">
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
</div>
I also note you're using some odd syntax around the anonymous function in the click handler which I presume this is due to another library. If not you should remove it.
This until works to find another element in the siblings, so in the above code you are selecting the next add-textbox and not the next X icon.
$('.delete-text-box-x').click(function() {
$(this).nextUntil('.delete-text-box-x')add(this).remove();
});

Advanced selector - Hide Parent

Here is my HTML:
<td>
<a class="button" href="#">
<input id="download">...</input>
</a>
<a class="button" href="#">
<input id="downloadcsv">...</input>
</a>
</td>
Using CSS I want to hide the <a> which contains an input with the ID = downloadcsv
Is there a parent option in CSS?
Edit: As current aswers indicate you cant hide a parent element based on the class of one of its childeren.
Is it possible to do this simply in Javascript, rather than using a framework like jQuery?
Assuming the <a> is the direct parent of the downloadcsv-input, you can just use
document.getElementById("downloadcsv").parentNode.style.display = "none"
This is not possible with CSS (2). However, it is possible with jQuery.
To expand on Fran's answer, the jQuery solution would be this:
$("a:has(#downloadcsv)").hide();
Otherwise, you'll need to put a class on the parent <a> indicating that it is the parent of #downloadscv.

Categories