I have the following code:
$(document).on( 'click', '.chevronright', function( event ) {
for (var i=0; i<2; i++){
var $next = $(this).siblings('.postlink').find('.post-title').eq(i+1).html();
$('.row').find('.post-title').eq(i).html($next);
}
I have three instances of row, and 3 instances of postlink inside each row, and there is also a chevron in each row. I want it so that when the chevron is clicked, the title from the middle one changes to the left one and the rightmost one changes to the middle one.
What happens is that when i click a chevron in row 2 or row 3, the first row is the one that the actions happen to. It gets the title of the chevron that is the next in line, in the row that I click on but it always happens to the first post-title in the page. How would I need to refer to the children of the chevrons parent row?
This is a bit "brute force" and sequence dependent but does that: (verbose for clarity)
//chevron is clicked,
$(document).on('click', '.chevronright', function(event) {
// get the elements with the class
var myPostlinks = $(this).parent('.row').find('.postlink');
//the title from the middle one changes to the left one and the rightmost one changes to the middle one.
// get reference to middle one
var middleoneNow = myPostlinks.eq(1).find('.post-title');
// get reference to left one
var leftoneNow = myPostlinks.eq(0).find('.post-title');
// Set right to middle (before we change middle)
myPostlinks.eq(2).find('.post-title').html(middleoneNow.html());
// Set middle to left now that right is set
middleoneNow.html(leftoneNow.html());
});
<style>.row{border:solid cyan 2px;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<span class="chevronright">chevron right</span>
<div class="postlink">
<span class="post-title">left title</span>
</div>
<div class="postlink">
<span class="post-title">middle title</span>
</div>
<div class="postlink">
<span class="post-title">right title</span>
</div>
</div>
<div class="row">
<span class="chevronright">chevron right</span>
<div class="postlink">
<span class="post-title">left title</span>
</div>
<div class="postlink">
<span class="post-title">middle title</span>
</div>
<div class="postlink">
<span class="post-title">right title</span>
</div>
</div>
<div class="row">
<span class="chevronright">chevron right</span>
<div class="postlink">
<span class="post-title">left title</span>
</div>
<div class="postlink">
<span class="post-title">middle title</span>
</div>
<div class="postlink">
<span class="post-title">right title</span>
</div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
For clarity here is an assumption on the markup: (yes it is horrid but demonstrates as here: https://jsfiddle.net/MarkSchultheiss/vfu10c5k/
You can try
Whatever.find('.post-title:eq('+(i+1)+')').html()
Related
<div class="icon-list-item">
<span class="icon-list-text">One</span>
</div>
<div class="icon-list-item">
<span class="icon-list-text">Two</span>
</div>
<div class="icon-list-item">
<span class="icon-list-text">Three</span>
</div>
<div class="icon-list-item">
<span class="icon-list-text">empty</span>
</div>
I would like to hide/remove any div that contains a span with "empty" content
I have tried many functions but none of them worked. Can you help me find some JS that can solve this?
Explanation : The forEach iterates through all the div elements having class icon-list-item. The spanChild variable holds the child element of the div element of current iteration. remove() function is used to remove element from DOM, when the text inside spanChild is "empty".
var divs = document.querySelectorAll('.icon-list-item');
divs.forEach((el) => {
let spanChild = el.children[0];
if(spanChild.innerText.trim() === "empty")
el.remove();
});
<div class="icon-list-item">
<span class="icon-list-text">One</span>
</div>
<div class="icon-list-item">
<span class="icon-list-text">Two</span>
</div>
<div class="icon-list-item">
<span class="icon-list-text">Three</span>
</div>
<div class="icon-list-item">
<span class="icon-list-text">empty</span>
</div>
I want to put a div in another div using js. I found a solution can do this but just put 1 div in div. Below html is my situation.
For example:
<body>
<div>
<span class="outer_part">
</span>
<div class="inner_part">1
</div>
</div>
<div>
<span class="outer_part">
</span>
<div class="inner_part">2
</div>
</div>
<div>
<span class="outer_part">
</span>
<div class="inner_part">3
</div>
</div>
</body>
Result:
<body>
<div>
<span class="outer_part">
<div class="inner_part">1</div>
</span>
</div>
<div>
<span class="outer_part">
<div class="inner_part">2</div>
</span>
</div>
<div>
<span class="outer_part">
<div class="inner_part">3</div>
</span>
</div>
</body>
I found solution but not work
<script>
$('.inner_part').appendTo('span.outer_part');
</script>
Your problem is that you appending all the .inner_part elements to all the .outer_part elements, but you only need to do a portion of that.
You can use each() to loop over all the .inner_parts, and attach each to its previous sibling, which is the .outer_part.
// loop over all inner parts
$('.inner_part').each(function() {
var innerPart = $(this);
var outerPart = innerPart.prev(); // inner part's previous sibling is the outer part
innerPart.appendTo(outerPart);
});
Or, shorter:
$('.inner_part').each(function() {
$(this).appendTo($(this).prev());
});
Get element by the ID, then add html inside of it to add a div in this case or anything you want.
document.getElementById('div1').innerHTML += '<div class="inner_part">1</div>';
<div id="div1"></div>
Attempting to auto increment step numbers for a form. Certain elements of the form may hide or show dependent on answers from above.
HTML
<div class="confirmation-step">
<span class="step-number"></span>
</div>
<div class="confirmation-step" style="display:none;">
<span class="step-number"></span>
</div>
<div class="confirmation-step">
<span class="step-number"></span>
</div>
jQuery
$('.confirmation-step').each(function() {
if($(this).is(':visible')) {
//set variable stepNum
//Haven't come up with anything good yet
} else {}
$(this).find('.step-number').html(stepNum);
});
Sample Output
<div class="confirmation-step">
<span class="step-number">1</span>
</div>
<div class="confirmation-step" style="display:none;">
<span class="step-number"></span>
</div>
<div class="confirmation-step">
<span class="step-number">2</span>
</div>
Thanks!
How about
$('.confirmation-step:visible .step-number').text(function(i) {return i+1;});
FIDDLE
I've got six divs that act as buttons. When clicked, one of the spans in a different div (and class) is displayed, and others are hidden.
Buttons:
<div class="menu">
<div class="menubutton">
Menu1
</div>
.
.
.
<div class="menubutton">
Menu6
</div>
</div>
Info shown based on clicked button:
<div class="information">
<span class="information1"> Info1 </span>
...
<span class="information6"> Info6 </span>
</div>
How do I know which one called the function, so I can know which span to make visible?
Provided your markup is this way:
<div class="menu">
<div class="menubutton">
Menu1
</div>
<div class="menubutton">
Menu2
</div>
<div class="menubutton">
Menu3
</div>
<div class="menubutton">
Menu4
</div>
<div class="menubutton">
Menu5
</div>
<div class="menubutton">
Menu6
</div>
</div>
<div class="information">
<span class="information1"> information1 </span>
<span class="information2"> information2 </span>
<span class="information3"> information3 </span>
<span class="information4"> information4 </span>
<span class="information5"> information5 </span>
<span class="information6"> information6 </span>
</div>
You can do this:
$('.menubutton').click(function(){
var index = $('.menubutton').index(this); //get the index of the menubutton clicked
$('.information > span').eq(index).show().siblings().hide(); // show the corresponding information item based onthe clicked one's index and hide others.
});
Demo
with this you can safely remove the class with index like information1, information2 etc instead you can add a common class say content
<div class="information">
<span class="content"> information1 </span>
<span class="content"> information2 </span>
<span class="content"> information3 </span>
<span class="content"> information4 </span>
<span class="content"> information5 </span>
<span class="content"> information6 </span>
</div>
and change it to:
$('.menubutton').click(function(){
var index = $('.menubutton').index(this); //get the index of the menubutton clicked
$('.information > .content').eq(index).show().siblings().hide(); // show the corresponding information item based onthe clicked one's index and hide others.
});
Since you can't have ID's, we can get the index of the clicked menu item, add 1, then find the corresponding information span to show:
$(".menubutton").click(function() {
var menuIndex = $(this).index() + 1;
$(".information" + menuIndex).show();
});
The this keyword inside a function refers to the element that called the function.
Add the #id for each menubutton, so:
<div class="menubutton" id="btn_1"></div>
then:
$(".menubutton").on("click", function() {
// Get the id of button clicked.
var id = $(this).attr("id").split("_")[1];
// Target SPAN with the same id.
$("SPAN.information" + id).show();
});
I am looking for a way to write a Greasemonkey script which will take the following snippet of code and only show the code blocks consisting of <div class="A" where both "passtest" and "State1" are present.
<div class="A">
<div class="B">
<a href="/link1">
<img class="imgClass" src="http://link.com/img.img" title="imgTitle"/>
</a>
</div>
<div class="C">
<span class="sc1">passtest</span>
<br/>
<em class="ec1">City1, State1</em>
</div>
</div>
<div class="A">
<div class="B">
<a href="/link1">
<img class="imgClass" src="http://link.com/img.img" title="imgTitle"/>
</a>
</div>
<div class="C">
<span class="sc1">failtest </span>
<br/>
<em class="ec1">City1, State1 </em>
</div>
</div>
<div class="A">
<div class="B">
<a href="/link1">
<img class="imgClass" src="http://link.com/img.img" title="imgTitle"/>
</a>
</div>
<div class="C">
<span class="sc1">passtest </span>
<br/>
<em class="ec1">City2, State2 </em>
</div>
</div>
I found this from Dive Into Greasemonkey:
var allDivs, thisDiv;
allDivs = document.evaluate("//div[#class='sponsoredlink']", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < allDivs.snapshotLength; i++) {
thisDiv = allDivs.snapshotItem(i);
// do something with thisDiv
}
I am looking at this code as the starting point for what I want to do. But, I am just a user, not a coder.
I understand the logic I need is:
For each div where class="a" which does contain the text "passtest" and also does not contain "state1" do not display that div.
Here's a script that does that, using jQuery. The hard part is choosing the selectors.
// ==UserScript==
// #name Show State1 passes only.
// #include http://YOUR_SITE/YOUR_PATH/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
// ==/UserScript==
$("div.A") .hide ()
.has ("span.sc1:contains('passtest')")
.has ("em.ec1:contains('State1')")
.show ();
Note that :contains() is case-sensitive.
See the code in action at jsFiddle.