クラスが存在する場合に値を配列に入れる方法

Question

classが "price"のdivの中に値のリストがありますが、それ以外の場合は配列に値 を押し入れることがintrestedです。

のdivパターンが.mainDiv>スパンで、.priceいつかパターンは、クラス=「価格」が存在する場合、配列に価格値をプッシュするので、どのように.mainDiv>スパン いつか.mainDiv>

.priceとなります。

DOMツリーは以下のとおりです。

<div class="mainDiv"> 
    <span>abcdsnndsjdjnd</span> 
    <div class="price">$2000</div> 
</div> 
<div class="mainDiv"> 
    <span>abcdsnndsjdjnd</span> 
    <div class="price">$300</div> 
</div> 
<div class="mainDiv"> 
    <span>abcdsnndsjdjnd</span> <!-- observe here price is not there --> 
</div> 

私は事前に私に感謝を助けてください、この

var arr = []; 
$('.mainDiv').each(function(i){ 
    if ($(this).hasClass('price')){ 
     arr.splice(i, 0, $(this).text()); 
    } else { 
     arr.splice(i, 0, 'no price'); 
    } 
}); 

のようなコードを使用しています

Answer 1

まず、あなたは.price要素が子供のとき、.mainDiv自体にhasClass()を使用しています。要素を取得するには、has()またはfind().lengthを使用できます。

map()を使用して配列を作成すると、これを簡単にすることもできます。試してみよう：

var arr = $('.mainDiv').map(function() { 
    return $(this).has('.price') ? $(this).text() : 'no price'; 
}).get(); 

Answer 2

1. $(this).hasClass('price')あなたのコード内のさまざまな問題があります - ここhasClass()方法の作業あなたはhas()メソッドのように期待通りではありません。選択された要素が降下していないかどうかを調べます。だから$(this).has('.price').lengthの代わりに
2. $(this).text()を使用してください。代わりに価格の使用$('.price', this).text()が必要なので、すべてのdivテキストを検索します。

---

使用 map()それが最適化させるためのjQueryのメソッド。

// iterate aver all div 
 
var arr = $('.mainDiv').map(function(i) { 
 
    // cache the `.price` element 
 
    var $price = $('.price', this); 
 
    // check `.price` element present or not 
 
    // and based on that generate the element 
 
    return $price.length ? $price.text() : 'no price'; 
 
    // get the array from the generated jQuery object 
 
}).get(); 
 

 
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mainDiv"> 
 
    <span>abcdsnndsjdjnd</span> 
 
    <div class="price">$2000</div> 
 
</div> 
 
<div class="mainDiv"> 
 
    <span>abcdsnndsjdjnd</span> 
 
    <div class="price">$300</div> 
 
</div> 
 
<div class="mainDiv"> 
 
    <span>abcdsnndsjdjnd</span> 
 
    <!-- observe here price is not there --> 
 
</div>