How to call class and inner class in each loop using jquery (asp.net c#)

Ashok Kumar 181 Reputation points
2023-01-30T13:51:19.94+00:00
I'm not sure this is a good question or not but I have doubt on this logic whether it is possible or not that is, I have html code of two same `div` class(graphsdetails) name and each `div` class name has `img and b` tag attributes and when the page is loaded I should fill (`ex: img and b tag`) using jQuery .each loop 

This is my html code :-

				<div id="strategydiploy_0" class="tab-pane fade show active">
                                        <div class="graphsdetails">
                                            <a>
                                                <span>
                                                    <em>
                                                        <img alt="" title="" src="a" class="img-responsive center-block sbimage">
                                                    </em><i class=""
                                                        data-placement="left" data-bs-original-title=""></i>
                                                    <b class="sbname"></b>
                                                </span><i class="autodeploychkbox"></i>
                                            </a><a>
                                                <span>
                                                    <em>
                                                        <img alt=""
                                                            title=""
                                                            src="a"
                                                            class="img-responsive center-block sbimage">
                                                    </em><i class=""
                                                        data-placement="left" data-original-title=""></i>
                                                    <b class="sbname"></b>
                                                </span><i class="autodeploychkbox"></i>
                                            </a><a>
                                                <span>
                                                    <em>
                                                        <img alt=""
                                                            title=""
                                                            src="a"
                                                            class="img-responsive center-block sbimage">
                                                    </em><i class=""
                                                        data-placement="left" data-original-title=""></i>
                                                    <b class="sbname"></b>
                                                </span><i class="autodeploychkbox"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div id="strategydiploy_1" class="tab-pane fade ">
                                        <div class="graphsdetails"><a>
                                                <span>
                                                    <em>
                                                        <img alt=""
                                                            title=""
                                                            src="a"
                                                            class="img-responsive center-block sbimage">
                                                    </em><i class=""
                                                        data-placement="left" data-original-title=""></i>
                                                    <b class="sbname"></b>
                                                </span><i class="autodeploychkbox"></i>
                                            </a><a>
                                                <span>
                                                    <em>
                                                        <img alt=""
                                                            title=""
                                                            src="a"
                                                            class="img-responsive center-block sbimage">
                                                    </em><i class=""
                                                        data-placement="left" data-original-title=""></i>
                                                    <b class="sbname"></b>
                                                </span><i class="autodeploychkbox"></i>
                                            </a><a>
                                                <span>
                                                    <em>
                                                        <img alt=""
                                                            title=""
                                                            src="a"
                                                            class="img-responsive center-block sbimage">
                                                    </em><i class=""
                                                        data-placement="left" data-original-title=""></i>
                                                    <b class="sbname"></b>
                                                </span><i class="autodeploychkbox"></i>
                                            </a>
                                        </div>
                                    </div>

So, here my requirement is when the page is loaded the `img src ="" and b tag` data should fill automatically 

ex :- `1. <img alt="" title="" src="https://somelink.com/test.png" class="img-responsive center-block sbimage"> <b class="sbname">some text</b>
2. <img alt="" title="" src="https://somelink.com/test_1.png" class="img-responsive center-block sbimage"><b class="sbname">some image text</b>`

like above example all the `img and b` tags data should fill

To achieve this I have written logic like below  


function LoadSBImages() {
$.ajax({

    type: "POST",
    data: "{}",
    dataType: "json",
    contentType: "application/json; charset-utf-8",
    url:"page.aspx/GetSBImages",

    success: function (result) {
        var imgcount = 0;
//sbimage image class looping        
 $(".sbimage").each(function () {

            //alert(imgcount);

            $(this).attr('src', result.d[imgcount].ImgaeURL); // able to filling the image src 
            $('.sbname').html(result.d[imgcount].StragyName); // b tag attribute data filling (but filling the last name to all the b tag)

            imgcount++;

        });

    },

    error: function ajaxError (result) {

        alert(result.status + ' : ' + result.statusText);
    }

});

}
I have tried myself some example like this below but not working

$(".graphsdetails > .sbimage >.sbname").each(function () {


Select development language
            $('.sbimage').attr('src', result.d[imgcount].ImgaeURL);
            $('.sbname').html(result.d[imgcount].StragyName);

})



Suggest me how to achieve this 

I'm new to jQuery logics
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,288 questions
0 comments No comments
{count} votes