Develop Reference

The functions .prev() and .closest() not working as expected

This is my .cshtml code :
<div class="col-xs-4 col-md-2">
<div class="form-group">
<input asp-for="FileName" type="hidden" class="hdnFileName" />
<input type="file" asp-for="UploadFile" accept=".csv" />
<button id="btnUpload" class="btn btn-tertiary btnFileSelect" type="button">Browse</button>
</div>
</div>
I need the id of the FileName on click of the upload button.
Script :
$(".btnFileSelect").each(function () {
var btnId = $(this).attr("id");
//The below code is not working and throwing an undefined value.
//Tried .closest() which is not working either.
var fileName = $(this).prev('.hdnFileName').attr('id');
})
Variable fileName is showing undefined.
What do I change? Is it being a hidden field the issue?

prev doesn't scan, it will only ever return a jQuery object for the previous element (if the selector matches) or an empty one (if it doesn't). From the documentation:
Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.
(jQuery's set-based nature makes that slightly less clear than it could be, but basically you'll get the immediately-previous element if it matches, or none if it doesn't.)
If you want to scan, use .prevAll().eq(0). Or in this case, I'd probably use siblings:
var fileName = $(this).siblings('.hdnFileName').attr('id');
(I'm assuming something at some point adds an id to that element, since it doesn't have one in the markup you've shown.)

how do I append the inserted URL into image after the inputed text?

I have written the code but the jquery code isn't getting executed.
Enter URL :<input type="text">
<button id="btn"> continue
</button>
<div contenteditable="true"
id="bod">
Click on this text to start writting</div>
$(document).ready(function(){
$("btn").click(function(){
$("bod").append($('input').html('<img alt="" src="'+$(this).val()+'">'))
})
});
Also I wanna use "input" or "textarea" instead of since I wanna tag that field with ng-model(angularjs).

I believe this is what you're trying to accomplish:
For one, you are trying to reference your elements with an id selector without #.
$("bod") should be $("#bod"), etc. '#" indicates an ID.
And also the way you were retrieving the value for input was all wrong.
Also if you want the value of one item, use an ID. Otherwise you'll get an array just using a generic element selector. I gave your input an id, so you weren't just trying to get a value off of $('input')
(I put a placeholder image address in your value, you can remove that)
Also view the snippet full screen. The small view makes it look like your text is being removed, but it's not really. It's just that when the img is appended, the baseline for everything is lower than the window in the snippet viewer.
$(document).ready(function(){
$("#btn").click(function(){
$("#bod").append('<img alt="" src="'+$('#inp').val()+'">');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Enter URL :<input id="inp" type="text" value="http://placehold.it/300">
<button id="btn">continue</button>
<div contenteditable="true" id="bod">Click on this text to start writting</div>

If i have understood your requirement correctly then JQuery code should be like this:
$(document).ready(function(){
$("#btn").click(function(){
var bodElem = $("#bod");
var url = $("input").val();
$('<img alt="" src="'+ url +'">').insertAfter(bodElem);
});
});

How to open display block using div name?

I have one problem in display the block using div name .Here My code
<button onClick="reply_click()">&#10799</button>
<div id='id' name='name' style="display: none;" >I am comming..</div>
<script>
function reply_click() {
//document.getElementById('id').style.display='block';
document.getElementsByName('name').style.display='block';
}
</script>
Using div id it will display the block ,but using div name it's not working
Any body give the sugesstion ?
Thanks in advance

Because getElementsByName returns an nodelist not a single element, so There should be
document.getElementsByName('name')[0].style.display='block';
DEMO

I think name is not an legal name to use it as value for name attribute. If this is the case, then use a proper legal name to use it as value of name attribute.
And, anyways try with different name as:
document.getElementsByName('divName')[0].style.display='block';

How do i access an input value that is up one level, and then a sibling of, using jQuery

i have a page that contains numerous divs like what is shown below, it is a page of color swatches, ie thumb size images. what i have to do is this: when the user mouses over an image swatch, it has to display the value of the input field who's name is 'descriptive name'.
the difficulty i'm having is accessing that input field's value. the image is nested in a label. the label and the input field are siblings.,
my pseudo code is something like this:
$('label.color-options img').each(function(){
$(this).mouseover(function(){
var descriptiveName = $(this).upOneLevel().sibling().('input.swatch- desciptive-name').value);
$('#display-descriptive-name').html(descriptiveName);
}) })
the page mark up is this:
<div id="display-name"> </div>
<!-- END MAIN PRODUCT IMAGE -->
<!-- the page is full of these color swatches -->
<div class="color-swatch-wrapper">
<input type="hidden" value="Avacado 77" name="descriptive-name" class="swatch-descriptive-name" />
<input type="radio" name="id[10]" value="129" id="attrib-10-129" class="color-swatch-radio-btn" />
<label class="attribsRadioButton color-options" for="attrib-10-129">
PP77<br />
<img src="images/attributes/artichoke_green.jpg" alt="" width="260" height="320" />
</label>
</div>
big thanks in advance

First off, you don't need to attach your event handlers in a loop, and to get the value of an input element you can use val().
You can use parent().siblings(), like this:
$('label.color-options img').mouseover(function(){
var descriptiveName = $(this).parent().siblings('input.swatch-desciptive-name').val();
$('#display-descriptive-name').html(descriptiveName);
});
Or alternatively, you can use closest() and find():
$('label.color-options img').mouseover(function(){
var descriptiveName = $(this).closest('.color-swatch-wrapper').find('input.swatch-desciptive-name').val();
$('#display-descriptive-name').html(descriptiveName);
});
I would recommend the latter as it will not break if you change the HTML structure of those elements, so long as the class names remain.

Try something like this:
var descriptiveName = $(this).parent().parent().find('input.swatch-descriptive-name').val();
Check the spelling of "descriptive" in your CSS class.

Using jQuery, trying to retrieve an image src value, when a nearest radio button is clicked on

i have a page that contains numerous divs like what is shown below, it is a page of color swatches, ie thumb size images.
what i'm trying to do is, when the user clicks on the radio button, get the source value of the image that is contained in the label element and then replace the main product image with it. but my code keeps returning the value as undefined. i've tried several variations on the code below, i've tried jQ's closest(), find(), next() and also prop("src") and attr().
('.swatches-radio-btn').each(function(){
$(this).click(function(){
var currImg = $(this).closest('label img').prop( "src" ); //not working
alert(currImg); //returns undefined
$('#productMainImage img').prop('src', currImg);
})
})
the mark-up is this,
<div id="productMainImage">
<img src="images/PP_watercress87.jpg" alt="Pepper Pot Silk" />
</div>
<div class="threads-swatch-wrapper">
<input type="radio" name="id[10]" value="129" id="attrib-10-129" class="swatches-radio-btn" />
<label class="attribsRadioButton thread-opts" for="attrib-10-129">Artichoke <br />
<img src="images/attributes/PP_artichoke77.jpg" alt="" width="260" height="320" />
</label>
</div>

I'd suggest:
$('input[type="radio"]').change(function(){
var currImg = $(this.labels[0]).find('img').prop('src');
$('#productMainImage img').prop('src', currImg);
});
JS Fiddle demo.
Or, if you're working with a browser that doesn't implement the labels property of the HTMLInputElement, you could instead use:
$('input[type="radio"]').change(function(){
var currImg = $(this).closest('div').find('label img').prop('src');
$('#productMainImage img').prop('src', currImg);
});
JS Fiddle demo.
References:
JavaScript:
labels (in the HTMLInputElement reference).
jQuery:
change().
find().
prop().

.closest searches up the tree whilst .find searches down. Use find instead.

This might work: var currImg = $(this).next('label').children('img').prop( "src" );

You can just use this -
$('.swatches-radio-btn').click(function(){
var currImg = $(this).next().find('img').attr('src');
$('#productMainImage img').attr('src', currImg);
});
WORKING DEMO - http://codepen.io/nitishdhar/pen/xsdIj