

jQueryを用いて、以下HTMLより  
「hoge1hoge1_2 数量：1 , hoge2hoge2_2 数量：2 , hoge3hoge3_2 数量：3 ...」と  
class="boxlist_"内にあるclass="list_"分だけ繰り返しで、  
特定属性のみピックアップし文字列が連結されreturn値を返したい次第です。

なお、数量についてはselect内で  
selected要素を持つもののみ、値として取得したいです。

▼HTML

[code]

    <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>
    
[/code]

▼試しているjs

[code]

    function(){
        var result = [];
        jQuery(".boxist_ tr.list_").map(function(index, Element){
        var itemName = jQuery(Element).find('td.name_ div.name_').text().replace(/\s+/g, "");
        var itemQty =jQuery(Element).find('p.qty_ select option:selected').attr('value'); 
        result.push(itemName+"数量："+" "+itemQty).join(","); //配列に追加
        return result;
        });
        //console.log(result);
    }
    
[/code]

これですと、[] という値となってしまい、  
うまく希望している値が返ってきません。

どう修正すればわからず、お教えいただけますとありがたいです。  
何卒、よろしくお願いいたします。


CC BY-SA 4.0
2021-03-28T05:45:50.807
74939
2021-03-28T21:47:13.897
2021-03-28T07:15:09.363
44536
44536
question
javascript html jquery
jQuery .each() .find()を用いた特定要素、属性値取得について


最初の間違いは、

[code]

        jQuery(".boxist_ tr.list_").map(function(index, Element){
    
[/code]

`.boxist` → `.boxlist` です。

[code]

        result.push(itemName+"数量："+" "+itemQty).join(","); //配列に追加
    
[/code]

せっかく`map()`なのでコールバックの中で`push()`する必要はありませんし、`join()`するタイミングがおかしいです。

[code]

    function() {
      let result = jQuery(".boxist_ tr.list_").map(function(index, element){
        let itemName = jQuery(element).find('td.name_ div.name_').text().replace(/\s+/g, "");
        let itemQty = jQuery(element).find('p.qty_ select option:selected').attr('value'); 
        return `${itemName}数量：${itemQty}`;
      }).get().join(",");
      return result;
    }
    
[/code]


CC BY-SA 4.0
2021-03-28T16:34:19.660
74949
2021-03-28T21:47:13.897
2021-03-28T21:47:13.897
3475
3475
74939
answer