I am trying to select the surround element when a image within the span is clicked 'remove()', but I am a little new to jQuery and can't figure out how to do it. I can't use a unique id as the element are generated dynamically.
For example:
<span class='type_link'> <img src='/images/deleteCross.gif' onclick='remove()' />Example</span>
I want to select the span when the image is clicked.
Here is an example to hide the parent element of the image:
<span class='type_link'> <img src='/images/deleteCross.gif' onclick='$(this).parent().hide();' />Example</span>
The trick is to use "this" and the parent()-function.
Cheers,
Chris
Look at this (for selector) and this (for event)!
Also W3schools provide Good example for first step in Jquery.
How about .parent() http://api.jquery.com/parent/
Related
suppose i have some html dom elements like
<slot></slot>
<slot name='slotWithName'></slot>
how to find the first slot dom through querySelector() method?
i have tried document.querySelector("slot :not([name])")
just not work :(
ok, i find the anwser by myself
Array.prototype.slice.call(document.querySelectorAll('slot'))
.filter(function(el){ return !el.name })
Try this:
querySelector('slot:not([name])')
I need to create the element and then delete it. Is there a way to find the element by it's text after it was created?
The xpath of the element is //div[#id='mif-tree-6']/span/span[3].
You can use xpath for it for example. Like:
//div[#id='mif-tree-6']//span[contains(text(),'your_text_here')]
UPDATE
Please provide an example of your html. It is possible to find a parent of your element with xpath and after that to find all the childs. For example your html =
<div id='lol'>
<div>first_item</div>
<div>second_item</div>
<div>third_element</div>
</div>
You get an array of elements with xpath =
//div[contains(text(),'first_')]/../div
So you can do something like:
click | //div[contains(text(),'first_')]/../div[2]
BUT if there are a lot of brothers-elements to find by text of one sibling it will be necessary to use loop to get every of them.
Once again. If you will provide full information about what are you doing and an example of your html it will be much easier to suggest.
One part of my meteor application is a semi-collaborative table where users can edit different rows at the same time. When a user is editing a row, the static text values need to switch to input boxes so that the values can be edited and then saved. I would like a template/helper to do this, essentially I want:
<td>
{{#if iAmEditing}}
{{foo}}
{{else}}
<input type="text" name="foo" value="{{foo}}">
</td>
except that there are several columns with different values of "foo" and I don't want to copy and paste this several times. What's the right way to approach this with templates and helpers?
Another approach might be to use the HTML5 contenteditable attribute. Either way, what is the right way to template these values with handlebars?
You should be able to integrate with Bootstrap Editable
For reference, an answer to the original question...
As of today, handlebars partials can't accept anything other than a context argument, but helpers can. Hence. you can define a helper that sets up the context for the template:
Coffeescript:
Handlebars.registerHelper "eventCell", (context, field, editable) ->
return new Handlebars.SafeString(
Template._eventCell
_id: context._id
field: field
value: context[field]
editable: editable
)
Template:
<template name="_eventCell">
<td><div data-ref="{{field}}" class="{{#if editable}}editable{{/if}}">
{{value}}
</div></td>
</template>
Then, I just use the following to render each field:
{{eventCell this "province" iAmEditing}}
I ended up integrating with bootstrap editable, so the template is a little different than my original question. Also, I'm not sure if this is the best way to do it, but it's a lot cleaner than what I had before.
meteor-editable is a new project implementing something like x-editable, but nicely integrated with Meteor reactivity. Unfortunately inline editing is not supported yet (you have to use a popover the way it's set up now).
I am trying to select a div based on its height, as shown in this tutorial,
jQuery Selection. I cannot get it to work: jsbin example . The line not working is:
$('div[height=50px]').css('background-color', 'orange');
That's an attribute equals selector, so the HTML it would match is:
<div height="50px"></div>
You could change it to:
$('div[style="height:50px"]').css('background-color', 'orange');
According to comments, the above doesn't work in Internet Explorer. Try the following instead:
$('div').filter(function() {
return $(this).css('height') == '50px';
}).css('background-color', 'orange');
If you want to match other elements with a height of 50px not specified using an attribute, take a look at the .filter() function.
If your HTML is...
<div style="height:50px;"></div>
Then your selector should be...
$('div[style*="height:50px"]');
If you are setting height to the value of "50px" and " 50px" (common), you will need to adjust accordingly...
$('div[style*="height:50px"], div[style*="height: 50px"]');
If you change the CSS of this element, the div's style attribute might become: "height:50px;background-color:orange", and it would cease to get picked up by this selector.
Docs: https://api.jquery.com/attribute-contains-selector/
#UiField Hyperlink historyLink;
this.historyLink.getElement().setAttribute("rel", "nofollow");
This sets the rel attribute of the containing div.
<div class="gwt-Hyperlink" rel="nofollow">history</div>
How do I get at the a tag?
You can get a element this way
Element a = historyLink.getElement().getFirstChildElement();
Maybe you can use an InlineHyperlink instead (if you don't want the div wrapper at all), but actually I don't understand the use of rel=nofollow on a link with a #hash-only href: if that's for Google AJAX crawling, can't you simply avoid outputting the link in the HTML snapshot you send in response to an _escaped_fragment_ request?