I have a page that is like this:
<div id="contBody">
<br />
<br />
<!-- Maybe more, it's a variable number of <br /> that can appear -->
<h1 id="header">Test</h1>
</div>
Since the number of <br /> before the <h1> varies I and I want to remove them programmatically, how I can do it using jQuery?
If you want to remove all of them before the h1 elements, do this:
$('br + h1').prevAll('br').remove();
Using the next-adjacent-selector[docs], this will find all <h1> elements that are preceded by at least once <br> element.
Then it uses the prevAll()[docs] method to select the previous <br> elements, and the remove()[docs] method to remove them.
You can find them all with .prevAll() and .remove() them, like this:
$("#header").prevAll("br").remove();
Related
I need to control hiding/showing certain spans. I found some examples here and the basic code works. Here is my jsfiddle. There are two topics and when the word more is clicked on, sub-topics are shown. The problem is that all of the sub-topics are shown, not just the ones under the topic that was clicked.
I know the problem is with the same class name being used for the two div sections and if I change the class name of one of them and duplicate the jquery it will work as I want. But this code is being created using a loop function in php and there isn't a set number of possible topics. I suppose I could change the php code to create unique class names but I don't know how to add the jquery code so it will check any number of possibilities. How can this be coded?
<script>
$("#kid-1").hide();
$("#kid-2").hide();
$("#kid-3").hide();
$(".more-kids").click(function() {
$("#kid-1").toggle();
$("#kid-2").toggle();
$("#kid-3").toggle();
});
</script>
<div class="information">
<span>Terms</span>
<span class="more-kids">more</span><br />
<span id="kid-1">First Child</span><br />
<span id="kid-2">Second Chlld</span><br />
</div>
<div class="information">
<span>Conditions</span>
<span class="more-kids">more</span><br /><br />
<span id="kid-3">Third Child</span><br />
</div>
If you are making id's that are numbers, that indicates you should probably be using a class instead. What you could instead do is change your id to a class being "kid". Then toggle the items by using $(this).nextAll(".kid").toggle():
$(".kid").hide();
$(".more-kids").click(function() {
$(this).nextAll(".kid").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="information">
<span>Terms</span>
<span class="more-kids">more</span><br />
<span class="kid">First Child</span><br />
<span class="kid">Second Chlld</span><br />
</div>
<div class="information">
<span>Conditions</span>
<span class="more-kids">more</span><br /><br />
<span class="kid">Third Child</span><br />
</div>
I want to use JS to add class .block to a tree of elements, up to a certain point—stopping when it reaches the first div element.
If the user doesn't have JS enabled, the elements should not have the class; else, they should. That's why I'm using jQuery to add the class instead of writing it in the markup.
Here's what I have:
<div>
<label>
<input .../>
<time>
<span class="js-block">Wednesday, </span>
<span class="js-block">Sep 28</span>
</time>
</label>
</div>
I want to add class .block to both spans, the time, and the label, (and not the input), and this works perfectly fine:
$('.js-block').addClass('block').parentsUntil('div').addClass('block')
Now the duplicate call .addClass('block') doesn't sit well with me, so I tried this, but it didn't work:
$('.js-block').add(function () {
return $(this).parentsUntil('div')
}).addClass('block')
Am I using .add() correctly?
I have not tested whether this
$('.js-block').add($('.js-block').parentsUntil('div')).addClass('block')
works, because if it did work, it would be just as bad as calling the same function twice. The whole point is to not have repeated code.
I assume here that you have added the class "block" to each element
Then to access the class just use
$(".block").click( .... etc etc
want to add class .block to both spans, the time, and the label, (and not the input)
My question is asking if I can reduce the number of calls to only
one time.
You can use :has(), :not()
$("div:has(.js-block) :not(input)").addClass("block")
.block {
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div>
div
<label> label
<input/>
<time>
<span class="js-block">Wednesady, </span>
<span class="js-block">Sep 28</span>
</time>
</label>
</div>
For you particular situation use .find('*') then use .not() to
exclude the element you don't want.
$("div").find('*').not('input').addClass("block")
$("div").find('*').not('input').addClass("block");
.block {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div>
div
<label>label
<input/>
<select>
<option>Select me</option>
</select>
<time>
<span class="js-block">Wednesady, </span>
<span class="js-block">Sep 28</span>
</time>
</label>
</div>
try something like this.
$(".class1").add(".class2").click(function(){
// do something
});
<div>
some text
<img />
<br>
text I want to select
<br>
<img />
some text
</div>
The HTML is like above, I want to select the text between the two images, is there anyway to do this?
Some background: I am trying to format some poorly written HTML so it can be further stylized. There are too many pages of them to hardcode it one by one, they have some certain pattern though, so I am trying to write a javascript function to make the whole procedure easier. The text between <br> is actually the description of the first image, I want to wrap it with <div> so I can add class to it and stylize it. But first I need to select it, right?
Simplest solution using core jQuery functions:
$('img').nextUntil('img').doSomething();
Jonathan Snook pointed me to the jQuery 1.4 function that solves this:
nextUntil()
Check out it's sibling functions:
prevUntil
parentsUntil
Inspired by:
nextAll
prevAll
For other reference check this one :How to select all content between two tags in jQuery
<div>
some text
<img />
<br>
<span>text I want to select <span>
<br>
<img />
some text
</div>
add tag for this and get "div span" . If have more span in "div" . add id or class for them.
I am trying to select those input fields on page to validate which are visible on layout. I am able to find out this through one way but with another way its not actually working. What I am getting is my selector is working for direct child but not for grand children.
I want to select only those elements ids which are actually visible on layout to validate them as they should not be blank.
Jsfiddle Demo
HTML
<div id="createdDiv1">
<div id="row11">
<div class="hide">
<input type="text" class="blk" id="inp_11"/>
</div>
</div>
<div id="row12">
<div>
<input type="text" class="blk" id="inp_12" />
</div>
</div>
</div>
<div id="createdDiv2">
<div id="row21" class="hide">
<div>
<input type="text" class="blk" id="inp_21" />
</div>
</div>
<div id="row22" class="">
<div>
<input type="text" class="blk" id="inp_22" />
</div>
</div>
</div>
<button onclick="subCheck('#createdDiv1 :visible')">check 1st</button>
<button onclick="subCheck('#createdDiv2 :visible')">check 2nd</button>
JavaScript
function subCheck(inBlock) {
inBlock=(inBlock==undefined)?'':inBlock;
var ids=[];
$(inBlock+' .blk').each(function(){
ids.push($(this).attr('id'));
});
console.log(ids);
}
CSS
.hide{
display:none;
}
Note: I don't want to change my subCheck() function since its generalized for all valiations, what I need to know how can I make it work with :visible selector or something similar to it to work with multi-levels checks for visible elements.
Sorry If I am making it ambiguous for you. I am not sure what exactly to explain in words.
use :not to exclude the class .hide:
<button onclick="subCheck('#createdDiv1 .inputDiv:not(\'.hide\')')">
check 1st
</button>
<button onclick="subCheck('#createdDiv2 .inputDiv:not(\'.hide\')')">
check 2nd
</button>
Fiddle: http://jsfiddle.net/Z4PSV/1/
Although I wouldn't suggest using onclick at all though, instead:
<button class="subcheck" data-id="createdDiv1">check 1st</button>
<button class="subcheck" data-id="createdDiv2">check 2nd</button>
<script>
$(document).on('click', '.subcheck' function() {
//Creates string as: '#createdDiv1 .inputDiv:not('hide')
var ft = "#" + $(this).data('id') + " .inputDiv:not('.hide')";
subCheck( ft );
});
</script>
Fiddle: http://jsfiddle.net/kY8Wh/
Lastly, if you were wishing to implement your :visible then:
<button onclick="subCheck('#createdDiv1 .inputDiv:visible')">
check 1st
</button>
<button onclick="subCheck('#createdDiv2 .inputDiv:visible')">
check 2nd
</button>
Fiddle: http://jsfiddle.net/Zgm78/
Would be sufficient too.
The issue is that you scan all the inner .blk elements of a visibile top element using each, in this case the element itself is visible, but hidden from the middle parent.
I know you won't change your subCheck function, bu you can simply solve the issue by checking there the visibility of the child element .blk.
Visibile selector take care of the effective visibility of the element (direct or nested):
Elements are considered visible if they consume space in the document.
Visible elements have a width or height that is greater than zero.
Elements with visibility: hidden or opacity: 0 are considered visible,
since they still consume space in the layout.
Elements that are not in a document are considered to be hidden;
jQuery does not have a way to know if they will be visible when
appended to a document since it depends on the applicable styles.
I think that this change will not break anything in your code.
Code:
function subCheck(inBlock) {
inBlock=(inBlock==undefined)?'':inBlock;
var ids=[];
$(inBlock+' .blk:visible').each(function(){
ids.push($(this).attr('id'));
});
//console.log(ids);
alert(ids);
}
Demo: http://jsfiddle.net/IrvinDominin/her4Y/
I have a very weird knockout js problem. What happens is that only the first tag in each div is rendered to the DOM, the others just ... don't. The werdest part is this: it does not produce any errors and the rest of the dom renders correctly, secondly it happens most but not all the time? Any guesses?
The template that is being rendered is this:
<div class="row">
<div>
<span data-bind="text: $data.topRows()[0].text() + $data.topRows()[1].text()" />
<input data-bind="value: $data.topRows()[0].inputText" /> <!-- this fails to go into the dom sometimes and every row past the first span and inside this div -->
</div>
<div>
<span data-bind="text: $data.topRows()[1].text()" /> <!-- this is renderdd -->
<input data-bind="text: $data.topRows()[1].inputText" /> <!-- this is not -->
</div>
</div>
I know this is not much to go on but well, I am speechless. RequireJs is used to require all the files.
You have various problems in your proposed snippet:
span elements don't work too well when self-closing, use <span data-bind="..."></span> instead;
you don't close the first comment correctly
as #ilya mentioned you probably want the value binding for inputs
you have a typo for the second input, it starts with <inputdata-bind... (missing a space there
If I fix those four problems your code will work fine.
You should use value binding instead of text for <input>
<span data-bind="text: $data.topRows()[0].text() + $data.topRows()[1].text()" />
<input data-bind="value: $data.topRows()[0].inputText" />
and
<span data-bind="text: $data.topRows()[1].text()" />
<input data-bind="value: $data.topRows()[1].inputText" />
JSFiddle DEMO