Develop Reference

Wrap elements and content into div

I am requesting data (with jQuery load() function) from another site into my <div class="ajax-container"> to display the gathered data. Data comes with elements AND content (only text, like "born 2007"). I have tried to wrap these with jQuery wrap() and wrapAll method, but it doesn't wrap it correctly. So I want to wrap all elements and content into a single div so I can style it more easily.
How can I achieve this? I need to wrap everything UNTIL certain class is found. I've also tried jQuery parentsUntil() method but that didn't work either. I have no idea how to achieve this so I need your help.
Example data (html that prints to my page):
<div class="container">
<b class="big_text">Title</b>
"some content after title "
<b>Subtitle content here</b>
<br />
<span class="no-wrap"><b>Price</b></span>
<br />
"made in 2007"
<div class="picture">
...
</div>
</div>
So that's the problem, I have to wrap everything into a div until <div class="picture"> appears.
This did not work:
$(".container").children().nextUntil(".picture").wrapAll("<div></div>");
This would be the desired result:
<div class="container">
<div class="content">
<b class="big_text">Title</b>
"some content after title "
<b>Subtitle content here</b>
<br />
<span class="no-wrap"><b>Price</b></span>
<br />
"made in 2007"
</div>
<div class="picture">
...
</div>

I believe the best approach is to wrap the inner contents then move "picture":
$(document).ready(function(){
$(".container").wrapInner("<div></div>");
$(".container").append($(".container .picture"));
})
.container > div ~ .picture {color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<b class="big_text">Title</b>
"some content after title "
<b>Subtitle content here</b>
<br />
<span class="no-wrap"><b>Price</b></span>
<br />
"made in 2007"
<div class="picture">
...
</div>
</div>

how do I select an element from a list based on a child value of it's grandparent

this is the object I'm trying to select: $x('//div[contains(#class,"react-select__value-container")]')
** There are 10 of these **
this is the grandparent object: $x('//div[#class="chart-option"]/label[.="Layer"]/..') ** There is only one of these **
the parent is a simple //div[contains(#class, "react-select")]
So the code looks like this:
<div class="chart-option">
<label>Layer</label>
<div class="react-select css-2b097c-container">
<div class="react-select__value-container css-1hwfws3">
So I need the "value-container" who's grandparent has the child /label[.="Layer"]
But I can't for the life of me get the ordering right and relative syntax to get it. Is there a good tutorial for this? Any help is appreciated.

Try this xpath:
//div[#class="chart-option"][label="Layer"]/div[div[contains(#class,"react-select__value-container")]]
Explanation
//div[#class="chart-option"][label="Layer"]
Looking anywhere in the document, select div tags such that (1) the class is chart-option and (2) there is a child tag called label with the value Layer.
/div[div[contains(#class,"react-select__value-container")]]
Looking at each node in the previous result set above, select all child div tags such that that child div tag itself has a div tag that matches the class pattern you have given. (In other words, match based on the grandchild's class, but ultimately select the child div tag.)
Test Cases
Here are some more test cases that I used. You can test using an online xpath testing tool.
<div>
<div class="chart-option">
<label>nope</label>
<div class="react-select css-WRONG-container">
<div class="react-select__value-container css-WRONG">
</div>
</div>
</div>
<div class="chart-option">
<label>Layer</label>
<div class="react-select css-CORRECT-container">
<div class="react-select__value-container css-CORRECT">
</div>
</div>
</div>
<div class="chart-option">
<label>Not Layer</label>
<div class="react-select css-WRONG-container">
<div class="react-select__value-container css-WRONG">
</div>
</div>
</div>
<label>Layer</label>
<div class="react-select css-WRONG-container">
<div class="react-select__value-container css-WRONG">
</div>
</div>
<div class="chart-option">
<label>Layer</label>
<div class="WRONG-AGAIN">
<div class="WRONG-AGAIN">
</div>
</div>
</div>
</div>

Background url from href

I am trying to get url from href and paste it in background image.
The problem is that it is applying to just first div not on all div. Is this possible without giving unique classes?
HTML
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
<div id="main-bg"> text
<div id="inner-content"> </div>
</div>
JS
$('#main-bg').css(
'background-image', 'url(' + $('#inner-content a').attr('href') + ')'
);
JSFIDDLE: https://jsfiddle.net/pr07zymf/

An id MUST be unique to each element! Using it multiple times may work at times in CSS, though, JavaScript isn't so forgiving. The reason only the first <div> is styled is because JavaScript ignores all other elements with the same id.
You can use classes instead as shown in the example below!
Example Code:
/* Iterate over every element having the given class. */
$('.main-bg').each(function (index, element) {
/* Cache a jQuery instance of the element. */
var el = $(element);
/* Get the 'href' and assign it as the 'background-image' for each element. */
el.css('background-image', 'url(' + el.find('.inner-content a').attr('href') + ')');
});
.main-bg {color: #fff}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>
<div class="main-bg"> text
<div class="inner-content">
</div>
</div>

When you are using HTML, please remember, the ID should always be UNIQUE.
You cannot make them the same name like "main-bg".
Solutions:
1, change their id's name to <div id ="main-bg1">, <div id ="main-bg2">, <div id ="main-bg3">, and <div id ="main-bg4">
2, use CLASS like
<div class="main-bg"> text
<div class="inner-content"> </div>
And remember, every time when you do
$('#ID')
or
document.getElementById(ID)
It will always choose the FIRST element which has this ID.

How to remove last element from div?

I have list of descriptions and after remove one of them, I'd like to remove last element from div, not refreshing site. I don't know javascript in fact, so I'd like to ask how should my destroy.js.erb looks like? I can refresh whole class "descriptions" using
$('.descriptions').load(location.href + " .descriptions");
but I'm interested, if there is way to remove only last element.
<div class="descriptions">
<%= render #descriptions %>
</div>
//_description.html.erb
<div class="description-field">
<%= #description.text %>
</div>
Thank you for any help

<div class="parent">
<div class="child">
Item 1
</div>
<div class="child">
Item 2
</div>
<div class="child">
Item 3
</div>
</div>
The following line of jQuery would delete "Item 3."
$('.parent').children().last().remove();

Use css selector :last-child to remove it (found here). Then use jQuery to remove last element.
$(".yourdiv :last-child").remove();
Here is jsFiddle example:
html:
<div>
<p> Hello </p>
<p> World </p>
<p> last element </p>
</div>
JavaScript:
$("div :last-child").remove();

Use this if you want to remove the last div:
$("div:last").remove();
Use this if you want to remove the last sibling of some div with id "#mydiv"
$('#mydiv:last-child')

<div id="parent">
<div id="child">
Item 1
</div>
<div id="child">
Item 2
</div>
<div id="child">
Item 3
</div>
</div>
The following is a JQuery code that removes the last child item 3
$("#child").remove();
or you can also use
$("#child").css({"display": "none"});

How to hide a DIV element using RegEx and Jquery

I would like to hide all other element except class="imagebrowser" in following,
<div class="entry">
<p>Heading 1</p>
<p>Heading 2</p>
...
<p>Heading n</p>
<b>This is abold text</b>
<div>This is a div element</div>
<div class="imagebrowser">
Hello world
</div>
</div>
Expected result,
<div class="entry">
<div class="imagebrowser">
Hello world
</div>
</div>
Any help please

Try this
$(".entry").children(":not(.imagebrowser)").hide();

$('div.entry div').not('.imagebrowser').hide();
This will hide all divs inside the "entry" div other than those with the class "imagebrowser".

Have you tried:
$('.entry').children().hide();
$('.imagebrowser').show();
This should hide all the contents of the entry div, including the p tags, and then show the imagebrowser div afterwards.

This code worked for me. You can replace $(this).val() with #target
$('.'+ $(this).val()).show(); $('.tabcontent2 tr:not(.'+ $(this).val() +')').hide();