In Tritium, How to insert any element between the children second and third anchor tag? - moovweb

<div class="parent">
<a class="cld1">1</a>
<a class="cld2">2</a>
<a class="cld3" >3</a>
<a class="cld4" >4</a>
</div>
How to insert any element between the children second and third anchor tag?

$('//div[#class="parent"]/a[#class="cld2"]') {
insert_after('div','hii')
}
You can do like this to inset div in between tag
Refer http://tester.tritium.io/18f12697fde014066894af356915af1471782732

Another way of doing this is:
$('//div[#class="parent"]/a[position()=2]') {
insert_after('div','Hello', class:'test')
}
This way we need not to worry about enter code here the class change or text change also.

Another way to do this if you want to target the number instead of the class is like so:
$('//div[#class="parent"]/a[contains(text(),"2")]') {
insert_after('div', class:'example')
}

Related

getElementsByClassName('class') for ONLY the element that is clicked on

I have a series of divs with classes. I want to select the text within the div that is clicked on by the user.
In the example code below, if user clicks on the first div, the text consoled out should be: "Sample text ONE"
If the user clicks on the 2nd div, it should be "Sample text TWO"
I can accomplish what I want with divs that have Id's and getElementById('id').innerHTML
but I am forced to accomplish it with classes, which does not work.
Digging further:
I am understanding that getElementsByClassName returns an array like object, and document.getElementsByClassName(".sample_div")[0].innerHTML will kind of work, but it only returns the first element. Perhaps there is a way to replace the 0 with the index of the div that is clicked on?
Any way to do this with classes will be great. Thank you.
<!DOCTYPE html> <html>
<div class='sample_div'>Sample text ONE</div>
<div class='sample_div'>Sample text TWO</div>
</html>
<script type="text/javascript">
const divs = document.querySelectorAll('.sample_div');
divs.forEach(divSelect => divSelect.addEventListener('click', notice));
function notice() {
let text = document.getElementsByClassName('.sample_div').innerHTML;
console.log(text);
}
this will contain the clicked element
With jquery, you can create an event listener that listens to all .sample_div and reference it with this variable.
$(".sample_div").click(function(){
console.log(this.innerHTML)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='sample_div'>Sample text ONE</div>
<div class='sample_div'>Sample text TWO</div>
Without JQuery it should be like this:
//Get all the elements with the class "sample_div"
var sampleDivs = document.getElementsByClassName("sample_div")
//Iterate over the sampleDivs node array
for(var x=0, sampleDivsLength = sampleDivs.length; x<sampleDivsLength;x++){
//Add an event listener for each DOM element
sampleDivs[x].addEventListener("click",function(){
console.log(this.innerHTML)
})
}
<div class='sample_div'>Sample text ONE</div>
<div class='sample_div'>Sample text TWO</div>

Bootstrap Dropdown Toggle Icon issue

I am using Twitter Bootstraps "dropdown menu" on WordPress for some widget I created and it works fine. But I want to change the icon to "minus" when it drops the content and when another "plus"-icon is clicked the "minus" should close. At the moment it will only toggle the current "plus".
<div class="dropdown toggle-details">
<img src="">
<h3>title</h3>
<h4><subtitle</h4>
<a class="dropdown-toggle my-btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fa fa-plus-circle"></i></a>
<ul class="dropdown-menu" >
<li> <h6>item 1</h6></li>
<li><h6>item 2</h6></li>
</ul>
</div>
my script is
jQuery('a').click(function() {
jQuery(this).find('i').toggleClass('fa-minus-circle');
jQuery(this).find('fa-minus-circle').toggleClass('fa-plus-circle')});
You're missing a dot in your jQuery, so right now jQuery is looking for an html element with tag name fa-minus-circle within the "a" element. And obviously not finding it.
jQuery(this).find('.fa-minus-circle').toggleClass('fa-plus-circle')...
actually that probably won't fix it either, because after that statement you'll end up with both classes on the i element. I guess you could work around that with css, but cleaner would be to have the "i" element default to a + icon, and then toggle a more semantic class name like "open".
So css:
i { /* show plus icon */ }
i.open { /* show minus icon */ }
And jQuery:
jQuery("a").on("click", function() {
jQuery(this).find("i").toggleClass("open");
});
Heh - now that I just typed everything out I see what you were doing with that second statement. So yeah, you just need a dot so jquery looks for the classname not the element.

Need help Selecting

I have HTML similar to this :
<div class="MainForm">
<form name="FromName">
<button name="Button1"></button>
...
...
</form>
<Div class="blackBox" style="visibility:hidden;"></div>
<Div class="SubFotm" style="visibility:hidden;"></div>
</div>
Now I can properly find the trigger for my button click in my script, but I'm not able to target only the closet blackbox to turn it visible.
Currently I'm doing :
if (PButtonName=="Fermer") {
$(this).closest("div .ProfileForm").remove(); // Closing Profile Form
} else if (PButtonName=="plusAdresse") {
alert('In');
$(this).closest("div .BlackBox").css("visibility","visible");
}
I can get the alert "In" to show, but not the BlackBox
If I change the
$(this).closest("div .BlackBox").css("visibility","visible");
for :
$("div .FormBlackBox").css("visibility","visible");
It will show, but will also show all the black box in the document.
If you are using the above HTML, or something similar, I would do it using a reference to the parents.
instead of:
$(".MainForm").closest("div .BlackBox").css('visibility','visible');
use
$(this).parents('.MainForm').children('.BlackBox').css('visibility','visible');
This is assuming you have more than one MainForm div and they all have a single child with the BlackBox class.
here is an example.
Instead of what you have done just add styles display:none; to your divs and then show them whenever you want.So you can do this as below:
<div class="MainForm">
<form name="FromName">
<button name="Button1"></button>
...
...
</form>
<div class="blackBox" style="display:none;"></div>
<div class="SubFotm" style="display:none;"></div>
</div>
and then in your script
if (PButtonName=="Fermer")
{
$(".MainForm").closest("div .ProfileForm").remove(); // Closing Profile Form
}
else if (PButtonName=="plusAdresse")
{
alert('In');
$(".MainForm").closest("div .BlackBox").show();
}
And I will recommend you using Switch case instead of loops at this place.

jQuery next() selector when divs are not neighboring

Ive been using the following to change the width of the div.my-div that appears after the one you've clicked:
$(".my-div").click(function () {
$(this).next().css({'width':'500px'});
});
As my divs were neighboring, this worked fine:
<div class="my-div">stuff</div>
<div class="my-div">stuff</div>
<div class="my-div">stuff</div>
However now the structure has changed so they are no longer neighboring:
<div>
<div class="my-div">stuff</div>
</div>
<div>
<div>
<div class="my-div">stuff</div>
</div>
</div>
<div class="my-div">stuff</div>
Whats the simplest way to select the next element of the same class?
Thanks
jQuery will return elements in order of their appearance in the DOM.
As such, you could cache all the .my-div elements, use the index()[docs] method to get the index of the one that received the event, increment it and use the eq()[docs] method to get the next one.
var divs = $(".my-div"); // cache all of them
divs.click(function () {
var idx = divs.index( this ); // get the index in the set of the current one
divs.eq( idx + 1 ).css({'width':'500px'}); // get the one at the next index
});
This saves you from doing a bunch of unnecessary DOM selection and traversing.
Example: http://jsfiddle.net/VrATm/1/
EDIT: Posted wrong example link. Fixed.
You can traverse the tree hierarchy. That is, you can first jump to parent, then to next, then to children, like this:
$(this).parent().next().find(' > div').css({'width':'500px'});

How to I use jQuery to identify selectors that I need?

I have code that looks like this:
<div class="tag">Order # :</div>
<div class="data">
<input type="text" name="oemTeo[<?=$o;?>]" id="o_oemTeo[<?=$o;?>]" value="<?=$vrow['oemTeo'];?>" />
</div>
I want to select (and apply some css to) the <div class="tag"> element directly BEFORE the <div class="data"> element. How would I define that selector using jQuery. I've tried $(this).prev('div .tag') but it did not work.
Thanks
Based on comments, since this refers to your <input> element, you need to go to the .parent() <div> before going to the previous sibling with .prev(), like this:
$(this).parent().prev("div.tag");
.prev() works only on sibling elements, and the <div> you're after isn't a sibling, but rather a sibling of the parent...so you just need to traverse up to that first.
If this is the div.data element, just remove the space from your selector (or eliminate the selector altogether):
$(this).prev('div.tag');
...or if you need to select from the DOM, you could do this:
$('div.tag + div.data').prev();
have you tried
$('div.data').prev().css('background-color', 'red');
this goes back to figuring out what 'this' is like nick said.
Since 'div' with class 'tag' is a sibling for 'div' with class 'data', you can use 'siblings()' method as :
$(function(){
var previousElement = $('div.data').siblings('div.tag');
console.log(previousElement);
});​
fiddle link: http://jsfiddle.net/jAnS8/1/