say I have
<div id="searchform">
<div style="float:right">
Advanced Search
</div>
<div id="resultStats">
About 5 trillion results
</div>
</div>
I just need to change the first child to float: bottom instead of float:right.
Thank you guys for your help! I really mean it! So when I enter this into the chrome console, it doesn't work. Within my Sweet Search ext, it says "Cannot read property 'childNodes' of null"
document.getElementById("subform_ctrl").childNodes[0].style = 'float:bottom';
(Note: id is 'subform_ctrl')
document.querySelector('#searchform *:first-child').style.float = 'bottom'
BUT I don't think float = bottom is valid.
So, what is it that you are really trying to accomplish?
document.getElementById('searchform').childNodes[0].style = 'float:bottom';
Float: bottom! (top?!)
Float: bottom? Sure!
Next release I am gonna delete 'About' trade 'results' for 'in' and delete 'seconds' and only show the seconds if it's longer than .5
Related
Current situation that is repeated several times:
<div ng-repeat="r in ids">
<span> DESIRED TEXT </span>
<div ng-repeat="c in ids">
<span> ng-bind-html="" UNDESIRED TEXT</span>
</div>
</div>
I tried using: element.all(by.repeater('r in ids')).all(by.tagName('span')).getText()
The problem is that this includes the second span as well. I would greatly prefer not to use xpath in the answer. So is there a way to specify only the first of each <span>, or to filter by not having ng-bind-html, etc?
Thanks!
Found a solution:
element.all(by.repeater('r in ids')).each(function (theElement, index) {
theElement.all(by.tagName('span')).first().getText().then(function (text){
console.log(text);
});
});
You can also use css selector to find the same:
element.all(by.css("div[ng-repeat='r in ids'] span")).getText();
Hope this helps.
On click li element i am getting the current element value and appending it into another div dynamically.Its working fine in all browsers.But returning null in IE7.I don`t the reason that why its happening?Please can any one give me a solution for this..Part of the code only i pasted here.
Sample code:
////////////.//This line returning null in IE7./////////////////
$('#pagelink_a #pagelinkli_'+tab_lastid_val).html()
(tab_lastid_val value can be a 1 or 2 or 3.Clixked li element value comes here)
<div class="pagelink">
<div id="pagelink_a">
<ul>
/******** all li element are clickable***********/
<li id="pagelinkli_1"><a>Google</a></li>
<li id="pagelinkli_2"><a>Chrome</a></li>
<li id="pagelinkli_3"><a>Firefox</a></li>
</ul>
</div>
</div?
try this:
$('#pagelink_a').find('li[id=pagelinkli_'+tab_lastid_val']').html();
code is not tested but i think it should work.
Given your html layout, your parent div is .pagelink not #pagelink_a , so replace your following line:
$('#pagelink_a #pagelinkli_'+tab_lastid_val).html()
for this one:
$('.pagelink #pagelinkli_'+tab_lastid_val).html()
Just use
$('#pagelinkli_'+tab_lastid_val).html()
The # tag identifies an ID which only a single element may have. There is no need to have anything preceding it. You also labeled the previous class as id, which is wrong. I don't know how your other browsers managed to get anything.
Although bit off topic, it may be better to actually drop IE7 support entirely. Due to small user base and decreasing popularity, it may be costing you more money by support it than to not support it.
Try instead of html() , and try append().
For example
$('#ID').append('Your content');
I don't know if the title is all apt...... but here is my situation....i have a class called dropper and another class drop_list...these two are sub-classes of the class drop_head, the drop_list has to drop down whenever the dropper is clicked...
<div class="drop_head">
<div class="dropper"> Content-1</divr>
<div class="drop_list"> List-1</div>
</div>
<div class="drop_head">
<div class="dropper"> Content-2</divr>
<div class="drop_list"> List-2</div>
</div>
when content-1 is clicked list-1 has to toggle and when content-2 is clicked list-2 has to drop down... how do i achieve this using single jquery..?? thanks in advance......
If i understand you correctly this should be pretty simple:
$('.drop_head').each(function(i,e){
$('.dropper', e).click(function(){
$('.drop_list', e).slideToggle();
});
});
by using the .drop_head as the context for the list and clickable element you dont need to use id's. additionally if you omit a list or dropper by accident it will only screw up that one "widget" and wont effect the others, which wouldnt be the case with closest.
you have two way (that I see =))
-just give two different ID names to your couples drop-list/dopper
<div class="dropper" id="id_1"> Content-1</divr>
<div class="drop_list" id="id_1"> List-1</div>
<div class="dropper" id="id_2"> Content-2</divr>
<div class="drop_list" id="id_2"> List-2</div>
and then say something like:
$(".dropper #id_1").click(function(){$("#id_1").slideToggle("slow")})
or shorter:
$(".dropper").click(function(){$(this).closest('drop_list').slideToggle()})
Hope it helps
Luca
Wordpress wraps images with captions in a div with a class of .wp-caption.
I'm looking for a way to select images that don't have this div so I can wrap them in different div. (to keep a consistent border around all the images)
<div class="blog-post-content">
<div id="attachment_220" class="wp-caption alignleft" style="width: 310px">
<img class="size-medium wp-image-220" src="/path/to/image" alt="" width="300" height="280" />
<p class="wp-caption-text">Caption Text</p>
</div>
<p>This is the body of the post</p>
</div>
To test my selector, I'm just trying to add a green border. I can handle the .wrap() once the selector is working.
The most promising of my attempts is:
$('.blog-post-content img').parent('div:not(".wp-caption")').css('border', '2px solid green');
... but no luck.
How about this: (untested)
$('.blog-post-content img').filter(function(){
return !$(this).parents('div').hasClass('wp-caption');
}).css('border', '2px solid green');
try:
$('.blog-post-content img').parent(':not("div.wp-caption")')
Not if what Matti says abotu the a element in the hierarchy then the above wont work.
I know this question was asked a long time ago, but I would like to suggest the following:
$('.blog-post-content img').closest('div:not(".wp-caption")')
Untested, but I think that should work, and is shorter than the answer above that works. Using closest means the a is ignored.
I have this html:
<div id="top">
<div id="potato"></div>
</div>
<div id="bottom">
<div id="potato"></div>
</div>
I am trying to use JQuery to access the bottom potato div, and none of the following work.
$('#top #potato').html('Russet');
$('#bottom #potato').html('Red');
$('#top > #potato').html('Russet');
$('#bottom > #potato').html('Red');
$('#potato').html('Idaho');
All of these just modify the top div and not the bottom one. How do I modify the bottom div?
All elements must have unique IDs, in this case you may use the class attribute, so that you have
<div class="potato" />
Which you may access like this:
$('#bottom > .potato').html('Idaho');
I just ran into this problem. Although it's true you shouldn't have two items with the same ID, it happens.
To get the div you want, this is what works for me:
$('#bottom').find('#potato');
For one thing you can not have an element that has the same id as another. Id is unique, but class names can be used as many times as you want
<div id="top">
<div id="potato1"></div>
</div>
<div id="bottom">
<div id="potato2"></div>
</div>
jquery as so:
$(function{
$("#potato2").html('Idaho'); //if you're going to name it with an id,
// that's all the selector you need
});
What you posted and said doesn't work seems to work to me.
$('#top #potato').addClass('Russet');
$('#bottom #potato').addClass('Red');
https://jsfiddle.net/wzezr706/
no need to put classes on everything, but you should have unique id's for everything. That aside, try this:
$("#bottom + div").html('Idaho');
Try this:
$("#bottom #potato").html('Idaho');
Or
$("#bottom #potato:last").html('Idaho');
your HTML is not valid, since you have non-unique ids