0 
:nth-child()

- 親の n 番目の子である各要素を選択するために使用されるセレクタです。

インデックス値を使用して親の子を選択する方法はありますか? 各子のプロパティを個別に取得および設定したい。私のコードの構造は次のとおりです。

for (var i=0;i<length;i++) {
  //Create a selector that will choose the first child using `index` value
  //Change each child's properties
}

誰かが私を助けてくれることを願っています。前もって感謝します。

4

3 に答える 3

5

使用できます$.each()

簡単な例 ( jsFiddle ): HTML:

<table>
    <tr id="test">
         <td>a</td>
         <td>b</td>
         <td>c</td>
         <td>d</td>
         <td>e</td>
    </tr>
<table>

jQuery:

$.each($("#test").children(), function(index, data){
       alert(index);
});
于 2013-05-13T07:52:15.253 に答える
2

複数の要素のプロパティを変更できるようにするjQueryメソッドの大部分は、たとえば複数の要素のテキストを変更するなど、それらの各要素を反復処理する匿名関数も許可します:

var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

// selects the '#container' element's children
$('#container').children()
/* the text method accepts an anonymous function,
   the first parameter is the index of the current element returned by the selectors,
   the second parameter is the 'current' value (so the current text of the element) */
.text(function (i, t) {
    // sets the text to be the current-text + the new string + the index of the element
    return t + ', of index ' + i;
})
// using an object to set multiple CSS properties:
.css({
    // setting the color to the color from the colors array with the same index:
    'color': function (i) {
        return colors[i];
    },
    // increasing the text-indent by 1em for every element
    'text-indent': function (i) {
        return (i * 1) + 'em';
    }
}).filter(function(i){
    /* keeps only those elements whose index, mod 2, is equal to 0
       (so the elements whose index is an even number) */
    return i%2 == 0;
}).css('font-weight', 'bold');;

JS フィドルのデモ。

上記では、次のベース HTML を使用しています。

<div id="container">
    <div>child of "#container"</div>
    <div>child of "#container"</div>
    <div>child of "#container"</div>
    <div>child of "#container"</div>
    <div>child of "#container"</div>
    <div>child of "#container"</div>
    <div>child of "#container"</div>
</div>

参考文献:

于 2013-05-13T09:44:48.230 に答える