Select a child without it's sibblings - javascript

How can i select only the - sign as a string using jquery or plain javascript?
I have no idea how i can do that.
<div class="container">
-
<div class="amount">
$3
</div>
</div>

With jQuery you can use contents and - will be the first node that you can get with first selector.
const div = $(".container");
const node = div.contents().first();
console.log(node.text().trim())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
-
<div class="amount">
$3
</div>
</div>
If you want to replace the text node with some other text or html element you can use replaceWith jquery method.
const div = $(".container");
const node = div.contents().first()
const newEl = $('<span>', {
text: node.text().trim() + ' update',
style: "color: red;"
})
node.replaceWith(newEl)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
-
<div class="amount">
$3
</div>
</div>

Access the first childNode of the .container:
console.log(document.querySelector('.container').childNodes[0]);
<div class="container">
-
<div class="amount">
$3
</div>
</div>

If you want to make sure that you get the content exactly, without selecting other children of the parent div, I suggest you should do it like this:
var content = $("#targetDiv")
.clone() //copy your div
.children() //get all its children
.remove() //destroy the children
.end() //select the element again(now it doesn't have children)
.text() //get the text of your div;
console.log(content);
<div class="container" id="targetDiv">
-
<div class="amount">
$3
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Check the snippet and see that it works.

Related

Javascript display inner html for a div with id

Is there any way to display all inner html content inside a div with plain javascript?
MyFiddle
<div id="parent">
<div id="child">
some-value
</div>
</div>
<div id="output">
</div>
I am trying to use outerhtml
var parent = document.getElementById("parent");
document.getElementById("output").innerHTML = parent.outerHtml;
You misspelled outerHTML (HTML in all capital). But to show HTML tags as well, use innerText instead
var parent = document.getElementById("parent");
document.getElementById("output").innerText = parent.outerHTML;
<div id="parent">
<div id="child">
some-value
</div>
</div>
<pre id="output"></pre>
Use innerText with outerHTML
var parent = document.getElementById("parent");
document.getElementById("output").innerText = parent.outerHTML;
#output {
white-space: pre;
}
<div id="parent">
<div id="child">
some-value
</div>
</div>
<div id="output"></div>
If you want to create everything from Javascript only. Look at this example.
var div = document.createElement("div");
var nodeDiv = document.createTextNode("Pay attention! This is new.");
div.appendChild(nodeDiv);
var element = document.getElementById("parent");
element.appendChild(div);
<div id="parent">
<div id="child">
some-value
</div>
</div>

Fetch and append element at last using jQuery

I have a div parent element with class .carousel-inner. Within this parent div, there are some children elements. I want to take its 2nd (child) element and append that element at last. I am getting and appending second element like this.
var a = $(".carousel-inner").children()[1];
$(".carousel-inner").append(a);
Now as I append this element, it removes this element from second position and append at the last. I want to keep this element a the second position as well. How can I do it?
using clone() after you find the element. and make another variable
var a = $(".carousel-inner").children()[1],
b = $(a).clone();
$(".carousel-inner").append(b);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner">
<div class="child">
a
</div>
<div class="child">
this clones
</div>
<div class="child">
c
</div>
</div>
OR clone the element just before appending like so :
var a = $(".carousel-inner").children()[1]
$(a).clone().appendTo('.carousel-inner');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner">
<div class="child">
a
</div>
<div class="child">
this clones
</div>
<div class="child">
c
</div>
</div>
Use .clone()
$(a).clone().appendTo('.carousel-inner');
Use clone();
var a = $(".test").children()[1];
a = $(a).clone();
$(".carousel-inner").append(a);
Clone is the good way to achieve what you want :
var a = $(".carousel-inner").children().eq(1);
a.clone().appendTo('.carousel-inner');
you are receiving an error because $(".carousel-inner").children()[1] get the DOM object and $(".carousel-inner").children().eq(1) get the Jquery object
and clone is defined only on jquery object.
use clone function like beolw
$("p").clone().appendTo("body");
You Can Do this way also.
var a = $(".carousel-inner").children().eq(1).prop('outerHTML');
$(".carousel-inner").append(a);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner">
<div class"first-child">First</div>
<div class"second-child">Second</div>
<div class"third-child">Third</div>
<div class"fourth-child">Fourth</div>
</div>

Get an specific class field content from the same page (Javascript or PHP)

I would like to get the content of an specific div class in Javascript or PHP. I've found some possible solutions but no one worked for me. This is the code of the page:
<div class="um-field um-field-professional_tag um-field-text" data-key="professional_tag">
<div class="um-field-label"><label for="professional_tag-27326">Professional Tag</label>
<div class="um-clear"></div></div>
<div class="um-field-area">
<div class="um-field-value">text_to_be_retrieved</div>
</div></div>
The required content is the one containing "text_to_be_retrieved" but the code shall not be aware of the text "text_to_be_retrieved" (it has to retrieve the text just with the surrounding divs information). Is it possible to store it in a PHP/Javascript variable to be used by another algorithm?
Thanks in advance.
You can do it like this, store those values in object:
var obj = {};
var nick = $('.um-field-label label').attr('for');
var val = $('.um-field-label').next('.um-field-area').find('.um-field-value').text();
obj.nickName = nick;
obj.value = val;
alert(obj.nickName + " " + obj.value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="um-field um-field-nickname um-field-text" data-key="nickname">
<div class="um-field-label">
<label for="nickname-27326">Professional Tag</label>
<div class="um-clear">
</div>
</div>
<div class="um-field-area">
<div class="um-field-value">adolfodominguez</div>
</div>
Use :contains selector to find elements that contains specified 'text'
If you have a variable holding the text wrapped in div, you can pass the variable in :contains
Try this:
var myText = 'adolfodominguez'; // Variable holding text value
var element = $('.um-field-value:contains("' + myText + '")')
console.log(element);
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="um-field um-field-nickname um-field-text" data-key="nickname">
<div class="um-field-label">
<label for="nickname-27326">Professional Tag</label>
<div class="um-clear">
</div>
</div>
<div class="um-field-area">
<div class="um-field-value">adolfodominguez</div>
</div>
Your HTML, I appended an element to show you the output.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="um-field um-field-professional_tag um-field-text" data-key="professional_tag">
<div class="um-field-label">
<label for="professional_tag-27326">Professional Tag</label>
<div class="um-clear"></div>
</div>
<div class="um-field-area">
<div class="um-field-value">adolfodominguez</div>
</div>
</div>
<br>Copied text:
<p class='demo'></p>
Using the jQuery framework of Javascript, you will get the result you are looking for:
var text = $("[for='professional_tag-27326']").parent('.um-field-label').next('.um-field-area').children('.um-field-value').text();
$('.demo').text(text);
https://jsfiddle.net/73mtmLLv/5/

Get sister element using jQuery

Is there a way to get a next element from a current sister element? Sorry if confusing.
<div class="wrapper">
<div class="paDiv">
<div class="saDivOne">
</div>
</div>
<div class="paDivTwo">
<div class="saDivTwo">
</div>
</div>
</div>
<script>
$('.paDiv').each(function(){
htmlContent = $(this).children().html();
SisterDivContent = $(this).next('.paDivTwo').children().html();
console.log(SisterDivContent);
})
</script>
$('.paDiv').each(function(){
var SisterDivContent = $(this).parent().find('.saDivTwo').html();
alert(SisterDivContent);
});
You have to add some contents inside div class 'saDivTwo'. Otherwise you will get empty content only.
Demo:
http://jsfiddle.net/U8n7g/
Try using .sibling:
$('.paDiv').sibling('paDivTwo').html()

wrap more than one nodes with div

How can i wrap exactly half of the div's with another div using jquery or javascript
I have this
<div class="post">1</div>
<div class="post">2</div>
<div class="post">3</div>
<div class="post">4</div>
<div class="post">5</div>
<div class="post">6</div>
I want this
<div class="wrap">
<div class="post">1</div>
<div class="post">2</div>
<div class="post">3</div>
</div>
<div class="wrap">
<div class="post">4</div>
<div class="post">5</div>
<div class="post">6</div>
</div>
Try using this:
var posts = $('.post'),
postCount = posts.length,
postHalf = Math.round(postCount/2),
wrapHTML = '<div class="wrap"></div>';
posts.slice(0, postHalf).wrapAll(wrapHTML); // .slice(0, 3)
posts.slice(postHalf, postCount).wrapAll(wrapHTML); // .slice(3, 6)
This selects all .post, gets the number of elements found then halves that value to get the splitting point. It then uses .slice() to select a specific range of elements and .wrapAll() to wrap each selection in <div class="wrap"></div>.
Here it is working: http://jsfiddle.net/ekzrb/

Categories