چگونگی حرکت بین اعضای یک لیست با جی کوئری

سلام



من یک لیست دارم که ممکن است هرتعدادی از عناصر داشته باشد برای نمونه لیست زیر سه عنصر دارد:

کد HTML:

---

<ul>
    <li>
        <span id="a">name</span>
        <span id="b">family</span>
        <span id="c">city</span>
        <button type="" id="d"></button>
    </li>

    <li>
        <span id="a">name</span>
        <span id="b">family</span>
        <span id="c">city</span>
        <button type="" id="d"></button>
    </li>

    <li>
        <span id="a">name</span>
        <span id="b">family</span>
        <span id="c">city</span>
        <button type="" id="d"></button>
    </li>

</ul>

---

حالا من میخواهم روی هرکدام از این دکمه ها که کلیک شد بتوانم name و family و city همون سطر رو بگیرم. من چطور میتونم با جی کوئری اینکارو بکنم؟

هرکدام از این li ها یک سطر از اطلاعات هستند و من قصد دارم کاری کنم که وقتی کاربر بخواهد این اطلاعات را ویرایش کند بتواند با کلیک روی دکمه ی موجود در هر ردیف اطلاعات را در یک مودال داشته باشد من برای این که بتوانم اطلاعات را در یک مودال نشان دهم نیاز دارم که ابتدا بتوانم ان ها را توسط jquery به نحوی find کنم.





من جی کوئری زیاد بلد نیستم و نمی تونم همچین find پیشرفته ای رو انجام بدم من فقط میتونم find ساده بزنم.
اگر لطف کنین یک نمونه برای من بنویسین خیلی ممنون میشم

$("#MyList li button").click(function () {

                alert($(this).parent().find('#a').text());

                alert($(this).parent().find('#b').text());

                alert($(this).parent().find('#c').text());



            });

کد HTML:

---

<ul id="MyList">
        <li>
            <span id="a">name1</span>
            <span id="b">family1</span>
            <span id="c">city1</span>
            <button type="" id="d1">btn1</button>
        </li>

        <li>
            <span id="a">name2</span>
            <span id="b">family2</span>
            <span id="c">city2</span>
            <button type="" id="d2">btn2</button>
        </li>

        <li>
            <span id="a">name3</span>
            <span id="b">family3</span>
            <span id="c">city3</span>
            <button type="" id="d3">btn3</button>
        </li>

    </ul>

---