CODEWITHSUNDEEP
jquery
Paul
Paul

Reputation: 283

Select only elements with particular style in a parent element

I have a jquery function that selects all elements with the img-w property but i want it to select only elements with img-w property in that particular ul class only not other classes so that what happens on that img-w won't affect other img-w in other parent elements

<button class="rreorder-all btn btn-outline-primary dropdown-toggle" style="margin-left: 10px" id="saveReorder">
                            Reorder photos
                        </button><br/>
<div id="reorderHelper" style="display:none;"><span class="selected-txt mt-5 ml-5" style="text-align: left">1. Drag photos to reorder. &nbsp; 2. Click 'Save Reordering' when finished.
                            </span>
</div><br/> @if(isset($images))
<ul class="reorder row" style="    margin-left: 30px">
    @foreach ($images as $image)
    <li class="img-box" data-src="{{$image->filename}}" id="{{$image->id}}">
        <div class="img-w" style="background-image: url('{{$image->filename}}')">
            {{-- <a href=""> <img class="mb-2 uploaded-photos " src="{{$image->filename}}" alt=""></a>!--}}
        </div>
        <span style="color: #333333;position: relative;width: 100%;text-align: justify;
             display: inline;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i></span>
    </li>
    @endforeach
</ul>


@endif $(document).ready(function() {
            $('.rreorder-all').on('click', function() {
                        $("ul.reorder").sortable({
                            tolerance: "pointer",
                            helper: "clone"
                        });
                        $('.rreorder-all').html('save reordering');
                        $('.rreorder-all').attr("id", "saveReorder");
                        $('#reorderHelper').slideDown('slow');
                        $('.img-w').attr("data-src", "");
                        $('.img-w').css("cursor", "move");
                        $("#saveReorder").click(function(e) {
                                    if (!$("#saveReorder i").length) {
                                        $(this).html('').prepend('saving...');
                                        $("ul.reorder").sortable('destroy');
                                        $('.img-w').css("cursor", "pointer");
                                        $('.img-w').attr("data-src", "{{$image->filename}}");
                                        $("#reorderHelper").html("Reordering Photos - This could take a moment. Please don't navigate away from this page.");
                                        var h = [];
                                        $("ul.reorder li").each(function() {
                                            h.push($(this).attr('id'))
                                        });
                                        $("#reorderHelper").hide(); // alert(h);

Upvotes: 0

Views: 51

Answers (1)

patilprashant6792
patilprashant6792

Reputation: 353

Youu can try using find() something like this

 $(".reorder").find('.img-w').css("cursor", "move");

So this will only select the .img-w in the ul , Kindly add your own selector instead of UL. according to your code

Let me know if it helps

Upvotes: 1

Related Questions