データ値文字列にハイフンを動的に追加するjQuery

Question

したがって、実行時にAJAX呼び出しとJSON応答を使用して読み込まれると思われる単純なULのページがあります。

$(".select-brands").append("<li data-value=" + manufacturerName + ">" + manufacturer + "</li>"); 

この後、私は、ユーザーが別の選択ボックスで選択したものと同じ名前の要素にスクロールするために、そのデータ-value属性を使用しています。彼らはハーレーダビッドソンの画像を選択すると、結果は私が期待したものではありませんしかし、だから、jQueryのは、私が代わりにこの

のような要素を取得しています代わりにそのデータ値を、

data-value="HARLEY-DAVIDSON" 

を持つ要素のために検索します

<li data-value="HARLEY" davidson="">HARLEY DAVIDSON</li> 

この名前に基づいて要素を選択できるようにするにはどうすればよいですか？ liタグ内のテキストを介して行うことはできますか？

// Get corresponding brand on list by custom data-value attribute // 
var listBrand = $('li[data-value="'+ selectedBrand.toUpperCase() +'"]'); 
var parent = $('#brands-select'); 
var index  = listBrand.index(); 

parent.animate({ 
     scrollTop: $('#brands-select li:nth-child('+ index +')').position().top - $('#brands-select li:first').position().top 
}, 'slow'); 

これは、選択した要素にスクロールするためのコードです。

Answer 1

$(".select-brands").append("<li data-value=" + manufacturerName + ">" + manufacturer + "</li>"); 

属性名の前後に引用符はありません。このようにする必要があります：

$(".select-brands").append("<li data-value='" + manufacturerName + "'>" + manufacturer + "</li>"); 

引用符で囲みます。

これらがないと、ハイフンが無視されるため、<li data-value=HARLEY-DAVIDSON>という2つの別個の属性として解析されます。