HTML 特定divの一部要素を配列化したい

下記のようなHTMLからjsを用いて

div class="name_" のテキスト
select name="qty *" のselected要素を持つもののみ

を[hoge1hoge1_2 数量：4 , hoge2hoge2_2 数量：2 , hoge3hoge3_2 数量：3 ...]のように配列化し、return値を返したいです。

<table class="boxlist_">
<tbody>
    <tr class="list_">
        <td class="name_">
            <div class="name_">

                <div class="name1_"><a href="/hoge/" title="hpge">hoge1</a></div>            
                <span class="name2_">hoge1_2</span>
            </div>
        </td>
        <td class="price_box_" nowrap="nowrap">
            <p class="qty_">数量<br>
            <select name="qty1"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4" selected="">4</option><option value="5">5</option>
            </select>
            </p>
        </td>
    </tr>
    <tr class="list_">
        <td class="name_">
            <div class="name_">
                <div class="name2_"><a href="/hoge/" title="hpge">hoge2</a></div>            
                <span class="name2_">hoge2_2</span>
            </div>
        </td>
        <td class="price_box_" nowrap="nowrap">
            <p class="qty_">数量<br>
            <select name="qty1"><option value="1">1</option><option value="2" selected="">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option>
            </select>
            </p>
        </td>
    </tr>
    <tr class="list_">
        <td class="name_">
            <div class="name_">
                <div class="name3_"><a href="/hoge/" title="hpge">hoge3</a></div>            
                <span class="name2_">hoge3_2</span>
            </div>
        </td>
        <td class="price_box_" nowrap="nowrap">
            <p class="qty_">数量<br>
            <select name="qty1"><option value="1">1</option><option value="2">2</option><option value="3" selected="">3</option><option value="4">4</option><option value="5">5</option>
            </select>
            </p>
        </td>
    </tr>
</tbody>
</table>

お教えいただけますと幸いです。

yambejp

2021/03/29 01:14 編集

> div class="name_" のテキスト「 <div class="name_"> <div class="name1_"><a href="/hoge/" title="hpge">hoge1</a></div> <span class="name2_">hoge1_2</span> </div>」の直下にあるテキストは空白文字と改行マークですが、何が戻ってくるのを想定していますか？

行動規範の内容に同意します

回答2件

ご教授いただきありがとうございます。
以下のようなjsで意図した結果返せました。

js
1function() {
2	var result = jQuery(".boxlist_ tr.list_").map(function(index, element){
3		var itemName = jQuery(element).find('td.name_ div.name_').text().replace(/\s+/g, "");
4		var itemQty = jQuery(element).find('p.qty_ select option:selected').attr('value'); 
5		return itemName+'数量：'+itemQty;
6	}).get().join(",");
7	return result;
8}