We Keep Coding

Jquery - if element contains a class, add HTML after element

I've got a booking form.booking-wrap with 2 elements in it, div#booking and then div.quantity
<form class="booking-wrap">
<div id="booking"></div>
/* insert div#message IF div.quantity is present inside div.booking-wrap */
<div class="quantity"></div>
</form>
The div.quantity is only present dynamically for some bookings.
What I am trying to achieve is that if the div.quantity is present, then I would like to insert an additional html div#message, but this new div should appear after div#booking and before div.quantity
I am trying the following jQuery:
if($('.booking-wrap:has(div.quantity)')){
$('#booking' ) .after( '<div id="message">Message</div>');
}
But that doesn't seem to work.
I then tried this:
$('.booking-wrap:has(div.quantity)').append($('<div id="message">Message</div>'));
This works and the new div appears, however it is just next to the quantity div.
How can I get it to show after the #booking , but before .quantity?

Any selector returns an object, you should check the length property of the returned object. Like $('.booking-wrap:has(div.quantity)').length
Though, I prefer $('.booking-wrap > div.quantity').length
if($('.booking-wrap > div.quantity').length){
$('#booking').after('<div id="message">Message</div>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="booking-wrap">
<div id="booking">booking</div>
<div class="quantity">quantity</div>
</form>

Try using prepend instead of append, since the selector $('.booking-wrap:has(div.quantity) will return the (div.quantity) element.
Example:
$('.booking-wrap:has(div.quantity)').prepend($('<div id="message">Message</div>'));

You can use "hasClass()" jQuery function to check class is exist or not:
Try This
if($( ".booking-wrap" ).children('div').hasClass( "quantity" )){
jQuery('<div id="message">Message</div>').insertAfter('.booking');
}

Try This jQuery.
if($(".quantity").length ){
$('#booking' ).after( '<div id="message">Message</div>');
}

You need to put the div you are adding within a function.
if($('.booking-wrap:has(div.quantity)')){
$( "#booking" ).after(function() {
return '<div id="message">Message</div>';
});
}

Is it possible to remove dom node from detached dom tree using jquery?

What I'm trying to do:
$domTree = $('<div class="container"><div class="first">first</div><div class="second">second</div></div>')
$domTree.remove('.first')
$dom.html() // Should contain second div only
What I get: both first and second divs are present.
What I'm doing wrong? What's the right approach?

Yes you can , use find to get the element and remove to remove it, end is used to return back the container
$domTree = $('<div class="container"><div class="first">first</div><div class="second">second</div></div>').find('.first').remove().end();
$domTree.html();
$domTree = $('<div class="container"><div class="first">first</div><div class="second">second</div></div>').find('.first').remove().end();
console.log($domTree[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

wrap only text within a selection in jquery

I have the following markup repeating several times on a page:
<div class="RebalanceCellBroadACName">
<img src="someimage.png" />
Accounts
</div>
Where I wish to use jquery to wrap only the word "accounts" in a span with the class .orange-category.
I have found that the following:
$(".RebalanceCellBroadACName").wrapInner("<span class='orange-category' />");
wraps both the image and the text.
This when typed in the console returns all of the instances of the text concatenated together:
$(".RebalanceCellBroadACName").text();
However the following returns an error "undefined is not a function", and I assume this is because I am selecting a string rather than a jQuery object.
$(".RebalanceCellBroadACName").text().wrapAll("<span class='orange-category' />");
So any help would be appreciated as to how to best achieve the folowing result via jquery:
<div class="RebalanceCellBroadACName">
<img src="someimage.png" />
<span class='orange-category' />Accounts</span>
</div>
For every instance of .RebalanceCellBroadACName on the page. Thank you for your help in advance.

A solution :
$(".RebalanceCellBroadACName").each(function(){
var img = $('img', this).detach();
$(this).wrapInner("<span class='orange-category' />").prepend(img);
})

While you don't have access to the text node, you do have access to the children that are DOM elements.
So basically you can clone the parent, remove the children, wrap the text and finally replace it in the original.
$(".RebalanceCellBroadACName").each(function(){
var $this = $(this);
var all_text = $this.html();
var clean_text = $this.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text().trim();
var new_text = "<span class='orange-category'>"+clean_text+"</span>"
$this.html(all_text.replace(clean_text, new_text));
})
http://jsfiddle.net/p2he9h2k/

jquery, how to use nextAll() with css scope

HTML:
<div class="my_1"></div>
<div class="my_big">
<div class="small" id="id_1"></div>
<div class="small" id="id_2"></div>
<div class="small" id="id_3"></div>
<div class="small" id="id_4"></div>
</div>
javascript:
var css_scope=$(".my_big");
var next_div=$(".my_1").nextAll('.small',css_scope).first();
console.log(" \n next div = "+ next_div.attr('id'));
console shows undefined. But if I exclude the my_big div from html and define var next_div in javascript as follows:
var next_div=$(".my_1").nextAll('.small').first();,
expected output is obtained.
How to make nextAll() work with the mentioned css scoping ?

.nextAll is used to find all the next siblings, you should find the .small from the result of nextAll.
var next_div=$(".my_1").nextAll('.my_big').find('.small').first();

You cannot get to .small from my_1 using nextAll() since they are not siblings. You can get to it using the following selector.
// Get the first element matching ".small" inside an element matching ".my_big"
// that comes immediately after an element matching ".my_1"
var next_div = $('.my_1 + .my_big > .small:first')​;
Check this demo: http://jsfiddle.net/q6XKR/

If you want to access the first element in my_big div, there's no need to bring my_1 into the scene.
var next_div = $('.my_big').find('.small').first();
console.log(" \n next div = "+ next_div.attr('id'));
Hope it clarifies you somewhat about traversing elements in jQuery.

prototype $ strange behaviour

i got a null object when i try to fetch an element by id using prototype's $ function, and got this strange behaviour:
document.observe('dom:loaded', function() {
$$('.answer').each(function(answer) {
console.log('answer.id: ' + answer.id);
console.log('$(answer.id): ' + $(answer.id)); # works, so the element does exists
console.log("$('answer_73'): " + $('answer_73')); # this doesn't, why?..
console.log(' ');
});
});
the divs are like this:
<div id="answer_73" class="answer"> ...
and there's no markup error
the logs:
....
answer.id: answer_73
$(answer.id): [object HTMLDivElement]
$('answer_73'): null
....
updated
sorry for all, finally i found what't gone wrong.. it's simply a type:
<div class="answer" id="answer_<%= answer.id %> "
it's the trailing whitespace which cause this 'strange' behaviour. maybe the prototype lib strips the trailig id when returning an object's id so the error didn't occur in the first case.

I'll bet you a beer that you have two elements with the id answer_73 in your document.

It works for me (Firefox 3.5, latest prototype.js):
<html><head><title></title>
<script src="prototype.js"></script>
<script>
function _debug (msg) {
document.body.innerHTML += "<p>"+msg+"</p>";
}
document.observe('dom:loaded', function() {
$$('.answer').each(function(answer) {
_debug("inside each, .id: "+answer.id); // works
_debug("inside each, byId .id: "+document.getElementById(answer.id));
});
_debug("outside each, byId literal: "+document.getElementById('answer_73'));
});
</script>
</head><body>
<div id="answer_72" class="answer"></div>
<div id="answer_73" class="answer">foo</div>
<div id="answer_74" class="answer"></div>
</body></html>
results in
foo
inside each, .id: answer_72
inside each, byId .id: [object
HTMLDivElement]
inside each, .id: answer_73
inside each, byId .id: [object
HTMLDivElement]
inside each, .id: answer_74
inside each, byId .id: [object
HTMLDivElement]
outside each, byId literal: [object
HTMLDivElement]

You're in documents's scope there. I'd also suggest you to use Firebug's console.log() function instead of alert() for debugging, then edit your topic.